网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
图层样式
-> JS配合css实现slide文字框缩放伸展效果
JS配合css实现slide文字框缩放伸展效果
作者:admin 发布时间:2010-11-27 8:54:05 发布人: admin
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content="text/html charset=gb2312"> <title>JS配合css实现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">收缩1</div> <div class="box_content"> <ul class="uft" style="padding:10px;"> <li> <a title="渐变彩色的文字" target="_blank" href="#"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="#"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="#"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="#"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动(纵向、横向)" target="_blank" href="#"> 图片的无缝滚动(纵向、横向)</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="#"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="#"> 比较实用的CSS控制链接颜色效果</a></li> </ul> </div> </div> <div class="box"> <div class="oHx slide">收缩2</div> <div class="box_content"> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="#"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="#"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果,默认时候层是折叠的" target="_blank" href="#"> Js实现的层展开、层折叠效果,默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="#"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="#"> JavaScript未知高度元素的垂直居中的方法</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="#"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="#"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="#"> 滚动的标题栏</a></li> </ul> </div> </div> <script type="text/javascript"> var mySlide = new Slide("box","slide","box_content",10); mySlide._slideEvent(); </script> </body> </html>
JS配合css实现slide文字框缩放伸展效果
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
纯CSS“三角边”的实现
下一篇:文章:
荧光效果不断闪动的文字
本类浏览排行 »
荧光效果不断闪动的文字
JS配合css实现slide文字框缩放伸展效果
纯CSS“三角边”的实现
CSS控制页面展开/关闭的代码
css制作的弹出式图片预览效果
带关闭功能的网站顶部滑出的广告提示条
纯CSS的下拉菜单 支持IE6 IE7 Firefox
DIV+CSS打造背景图片翻转网页导航菜单
本站推荐文章 »
带关闭功能的网站顶部滑出的广告提示条
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效