JS实现slide文字框缩放伸展效果代码


Posted in Javascript onNovember 05, 2015

本文实例讲述了JS实现slide文字框缩放伸展效果代码。分享给大家供大家参考,具体如下:

这里介绍的slide文字框缩放伸展效果,自己闲来无事写的,不是太好,可能在兼容性方面还需努力,展开速度方面,IE8和火狐的展开速度不一样,火狐下更快一些,至今没找到原因,也请JS高人指点江山。

运行效果截图如下:

JS实现slide文字框缩放伸展效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content" content="text/html charset=gb2312">
<title>slide文字框缩放伸展效果</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 class="box"> 
   <div class="oHx slide">收缩2</div> 
   <div class="box_content">
    <ul class="uft" style="padding:10px;"> 
     <li><a href="#" target="_blank">scscms V1.0 阳光企业网站系统</a></li>
  <li><a href="#" target="_blank">24点,VC++游戏源码</a></li>
  <li><a href="#" target="_blank">可记录图像的C#数据库记录单程序</a></li>
  <li><a href="#" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul> 
   </div>
  </div>
  <div class="box"> 
   <div class="oHx slide">收缩3</div> 
   <div class="box_content">
    <ul class="uft"style="padding:10px;"> 
     <li><a href="#" target="_blank">scscms V1.0 阳光企业网站系统</a></li>
  <li><a href="#" target="_blank">24点,VC++游戏源码</a></li>
  <li><a href="#" target="_blank">可记录图像的C#数据库记录单程序</a></li>
  <li><a href="#" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul> 
   </div>
  </div>
  <script type="text/javascript">
   var mySlide = new Slide("box","slide","box_content",10); 
   mySlide._slideEvent();
  </script>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
jQuery 操作XML入门
Dec 25 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
Vue简单实现原理详解
May 07 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
如何防止JavaScript自动插入分号
Nov 05 #Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
javascript常用函数(1)
Nov 04 #Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
You might like
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
element el-input directive数字进行控制
2018/10/11 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
宣传普通话标语
2014/06/27 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
教师个人事迹材料
2014/12/17 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js