Home > Web Front-end > JS Tutorial > body text

js method to achieve slow contraction and expansion of div layer_javascript skills

WBOY
Release: 2016-05-16 15:59:42
Original
1614 people have browsed it

The example in this article describes the method of slowly shrinking and expanding the div layer in js. Share it with everyone for your reference. The specific analysis is as follows:

This is a special effect code for layer expansion and contraction, with a bit of animation effect and slow expansion. It is jointly created with DIV JS and looks pretty good. Not restricted by the content, the speed of contraction and expansion can be controlled, and the height and cycle time can also be changed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层收缩</title>
<script type="text/javascript">
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 < 0){
  if (o.offsetHeight <= t.minHeight){
   clearTimeout(t.timer);
   return;
  }
 }
 else{
  if (o.offsetHeight >= 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 );
}
</script>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="xx"><h5 onclick="toggle(this.parentNode)">点击此处层伸缩</h5>
<p>Tomat6.0的配置视频教程,AVI电影格式,相当清淅了,比起图文版的教程更贴切,
不会配置Tomcat的网友,你可不要错过哦,由于视频抓图挺麻烦的,
试了多次还是抓了一个不太清淅的,大家将就吧。</p>
</div>
</body>
</html>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!