实现幻灯片文本框缩放拉伸效果的JS代码

本文介绍了实现滑动文本框缩放效果的JS代码。分享给大家参考，如下：

这里介绍的幻灯片文本框缩放拉伸效果不是很好，但在兼容性方面可能需要下功夫。在扩展速度上，IE8的扩展速度与火狐不同，但在火狐下更快。到目前为止，还没有找到原因，所以请JS专家给出建议。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-slide-txt-dlg-show-codes/

具体代码如下：

！DOCTYPE html html health eta http-equiv=' content ' content=' text/html charset=GB 2312 '标题幻灯片文字框缩放伸展效果/title style type=' text/CSS ' * { margin :0；划水：0;} ul { list-style :无；}.盒子{ width :300 pxmargin :10 pxborder :1 px固体# ccc飞越：隐藏；位置：相对；font-size :12 px}.oHx { height:30px背景技术# eee线高：30 pxfont-size :14 px文本-缩进：14像素；光标：指针指针；}.折叠{ position : absolutetop :9 pxright :12 px }。box _ content {行高：18 px飞越：隐藏；display:none}/style脚本类型=' text/JavaScript '函数getElementsByClassName(类名、id、标记){标记=标记| | ' *；if(id){ var id=typeof id=='string '？$(id): id；} else { var id=document . body } var els=id。getelementsbytagname(标记)，arr=[]；for(var i=0，n=els.length在；i ){ for(var j=0，k=els[i].className.split(')，l=k.lengthJLj){ if(k[j]==类名){ arr。push(els[I])；打破；} } }返回arr }；函数幻灯片(幻灯片类，幻灯片，幻灯片图标，幻灯片速度){这。oslides=getElementsByClassName(幻灯片类)；this.oTimer=nullthis。幻灯片BTN=幻灯片BTN；这个。滑动图标=滑动图标；这个。滑动速度=滑动速度；}幻灯片。prototype={ otimer : Null，_init:function (){ this ._ slide事件()；}，_ slide event : function(){ var This=This；对于(var i=0，n=这个。奥斯里兹。长度；在；我){(函数(n){ var oSlide=this。OS lides[n]；var oSlideBtn=getElementsByClassName(这。幻灯片BTN，oSlide)[0]；var oSlideCon=getElementsByClassName(这。slide con，OSLide)[0]；奥斯利德宾。onclick=function(){ if(oslidecon。风格。display==' block '这个。otimer==null){这._滑动关闭(oSlideCon)；}else if(！(oslidecon。风格。display==' block ')这个。otimer==null){这._滑动打开(oSlideCon)；} } })(i) } }，_ slide open :函数(slide con){ var This=This；幻灯片风格。display=' block幻灯片风格。高度='自动'；变化的滑动高度=滑动角度偏移；幻灯片风格。高度=0 ' px这个。otimer=设置间隔(函数(){ if(幻灯片控制点偏移幻灯片高度){幻灯片控制点样式》。高度=滑动控制偏移高度2 ' px} else { clearInterval(这。otimer)；This.oTimer=null} }，这。滑动速度)；}，_ slide关闭：功能(slide con){ var This=This；这个。otimer=set interval(function(){ if(slide con . offset the art=0){ clearInterval(this。otimer)；幻灯片风格。显示='无'；this . otimer=null } else { slide con . style。高度=滑动控制偏移高度-2 ' px '；} }，这个。滑动速度)；} }/脚本/头体div class=' box ' div class=' OhX slide '收缩2/div class=' box _ content ' ul class=' uft ' style=' padd :10 px；'lia href=' # ' target=' _ blank ' SCS CMS v 1.0阳光企业网站系统/a/Li lia href=' # ' target=' _ blank ' 24点，VC游戏源码/a/li lia href='#' target='_blank '可记录图像的C#数据库记录单程序/a/Li lia href=' # ' target=' _ blank ' jquery 1.4参考指南的实例源代码/a/Li/ul/div/div class=' box ' div class=' OhX slide '收缩3/div div class=' box _ content ' ul class=' uft ' style=' padd :10 px；lia href=' # ' target=' _ blank ' SCS CMS v 1.0阳光企业网站系统/a/Li lia href=' # ' target=' _ blank ' 24点，VC游戏源码/a/li lia href='#' target='_blank '可记录图像的C#数据库记录单程序/a/Li lia href=' # ' target=' _ blank ' jquery 1.4参考指南的实例源代码/a/li /ul /div /div脚本类型=' text/JavaScript ' var Myslide=new slide(' box '，' Slide '，' box_content '，10)；我的立德_ slide事件()；/脚本/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。