Home>

The slide text box scaling effect introduced here,I have nothing to write about,not too good,May need to work on compatibility,In terms of deployment speed,ie8 and Firefox have different expansion speeds,Faster under Firefox,No cause has been found so far.Please js expert guidance.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html>
<html>
<head>
<meta http-equiv="content" content="text/html charset=gb2312">
<title>slide text box zoom stretch effect</title>
<style type="text/css">
* {margin:0;padding:0;}
ul {list-style:none;}
.box {width:300px;margin:10px;border:1px solid #ccc;overflow:hidden;position:relative;font-size:12px;}
.ohx {height:30px;background:#eee;line-height:30px;font-size:14px;text-indent:14px;cursor:pointer;}
.fold {position:absolute;top:9px;right:12px;}
.box_content {line-height:18px;overflow:hidden;display:none;}
</style>
<script type="text/javascript">
 function getelementsbyclassname (classname, id, tag) {
    tag=tag || "*";
    if (id) {
     var id=typeof id == "string"?$(id):id;
    } else {
     var id=document.body;
    }
    var els=id.getelementsbytagname (tag), arr=[];
    for (var i=0, n=els.length;i<n;i ++) {
     for (var j=0, k=els [i] .classname.split (""), l=k.length;j<l;j ++) {
      if (k [j] == classname) {
       arr.push (els [i]);
       break;
      }
     }
    }
    return arr;
   };
   function slide (slideclass, slidebtn, slidecon, slidespeed) {
    this.oslides=getelementsbyclassname (slideclass);
    this.otimer=null;
    this.slidebtn=slidebtn;
    this.slidecon=slidecon;
    this.slidespeed=slidespeed;
   }
   slide.prototype={
    otimer:null,    _init:function () {
     this._slideevent ();
    },    _slideevent:function () {
     var this=this;
     for (var i=0, n=this.oslides.length;i<n;i ++) {
      (function (n) {
       var oslide=this.oslides [n];
       var oslidebtn=getelementsbyclassname (this.slidebtn, oslide) [0];
       var oslidecon=getelementsbyclassname (this.slidecon, oslide) [0];
       oslidebtn.onclick=function () {
        if (oslidecon.style.display == "block" &&this.otimer == null) {
         this._slideclose (oslidecon);
        } else if (! (oslidecon.style.display == "block")&&this.otimer == null) {
         this._slideopen (oslidecon);
        }
       }
      }) (i)
     }
    },    _slideopen:function (slidecon) {
     var this=this;
     slidecon.style.display="block";
     slidecon.style.height="auto";
     var slideheight=slidecon.offsetheight;
     slidecon.style.height=0 + "px";
     this.otimer=setinterval (function () {
      if (slidecon.offsetheight<slideheight) {
       slidecon.style.height=slidecon.offsetheight + 2 + "px";
      } else {
       clearinterval (this.otimer);
       this.otimer=null;
      }
     }, this.slidespeed);
    },    _slideclose:function (slidecon) {
     var this=this;
     this.otimer=setinterval (function () {
      if (slidecon.offsetheight<= 0) {
       clearinterval (this.otimer);
       slidecon.style.display="none";
       this.otimer=null;
      } else {
       slidecon.style.height=slidecon.offsetheight-2 + "px";
      }
     }, this.slidespeed);
    }
   }
  </script>
 </head>
 <body>
  <div>
   <div>Shrink 2</div>
   <div>
    <ul>
     <li><a href="#" target="_ blank">scscms v1.0 Sunshine Enterprise Website System</a></li>
  <li><a href="#" target="_ blank">24 o'clock, vc++ game source code</a></li>
  <li><a href="#" target="_ blank">C#database record sheet program that can record images</a>
  <li><a href="#" target="_ blank">Example source code for jquery 1.4 reference guide</a></li>
    </ul>
   </div>
  </div>
  <div>
   <div>Shrink 3</div>
   <div>
    <ulstyle="padding:10px;">
     <li><a href="#" target="_ blank">scscms v1.0 Sunshine Enterprise Website System</a></li>
  <li><a href="#" target="_ blank">24 o'clock, vc++ game source code</a></li>
  <li><a href="#" target="_ blank">C#database record sheet program that can record images</a></li>
  <li><a href="#" target="_ blank">Example source code for jquery 1.4 reference guide</a></li>
    </ul>
   </div>
  </div>
  <script type="text/javascript">
   var myslide=new slide ("box", "slide", "box_content", 10);
   myslide._slideevent ();
  </script>
 </body>
</html>
  • Previous Deep understanding of closures in Swift
  • Next PHP page flip function implementation method