js-Methode, um eine langsame Kontraktion und Erweiterung der div-layer_javascript-Fähigkeiten zu erreichen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

js-Methode, um eine langsame Kontraktion und Erweiterung der div-layer_javascript-Fähigkeiten zu erreichen

May 16, 2016 pm 03:59 PM

js Expandieren

Das Beispiel in diesem Artikel beschreibt die Methode zum langsamen Verkleinern und Erweitern der div-Ebene in js. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist ein Spezialeffektcode für die Ebenenerweiterung und -kontraktion mit etwas Animationseffekt und langsamer Erweiterung. Er wurde gemeinsam mit DIV JS erstellt und sieht ziemlich gut aus. Unabhängig vom Inhalt kann die Kontraktions- und Expansionsgeschwindigkeit gesteuert und auch die Höhe und Zykluszeit geändert werden.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;层收缩&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var mh = 30;//高度
var step = 1;//每次变化的量
var ms = 10;//循环时间
function toggle(o){
 if (!o.tid)o.tid = "_" + Math.random() * 100;
 if (!window.toggler)window.toggler = {};
 if (!window.toggler[o.tid]){
  window.toggler[o.tid]={
   obj:o,
   maxHeight:o.offsetHeight,
   minHeight:mh,
   timer:null,
   action:1
  };
 }
 o.style.height = o.offsetHeight + "px";
 if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
 window.toggler[o.tid].action *= -1;
 window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
}
function anim(id){
 var t = window.toggler[id];
 var o = window.toggler[id].obj;
 if (t.action &lt; 0){
  if (o.offsetHeight &lt;= t.minHeight){
   clearTimeout(t.timer);
   return;
  }
 }
 else{
  if (o.offsetHeight &gt;= t.maxHeight){
   clearTimeout(t.timer);
   return;
  }
 }
 o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
 window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}
&lt;/script&gt;
&lt;style type="text/css"&gt;
div.xx{
 border:solid 1px;overflow:hidden;
}
div.xx h5{
 border:solid 1px;border-width:0 0 1px;
 padding:0;margin:0;height:28px;
 line-height:30px;cursor:pointer;
 background:#eee;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="xx"&gt;&lt;h5 onclick="toggle(this.parentNode)"&gt;点击此处层伸缩&lt;/h5&gt;
&lt;p&gt;Tomat6.0的配置视频教程，AVI电影格式，相当清淅了，比起图文版的教程更贴切，
不会配置Tomcat的网友，你可不要错过哦，由于视频抓图挺麻烦的，
试了多次还是抓了一个不太清淅的，大家将就吧。&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn