JS配合css实现slide文字框缩放伸展效果

<!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>

转载于:https://www.cnblogs.com/youtianxia/p/4062155.html

JS配合css实现slide文字框缩放伸展效果相关推荐

html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果.我从来不知道优雅的方块盒子布局能给我深刻的印象.因此我尝试在web里用CSS和Jquery去实现这种tile设计.我已尝试Til ...
怎样用原生js配合css的transition写个无缝滚动
之所以想要写原生js配合css转换的无缝滚动,是因为之前在简书上看到一哥们写的一篇文章,说是在网上找了一堆js配合css transition属性写的轮播插件,可惜没有无缝的效果,结果他用原生js重写 ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
CSS倾斜边框|创意框边框悬停效果
CSS倾斜边框|创意框边框悬停效果教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图代码区以下代码为本人填写,转载请注明教程地 ...
html文字左右两边有居中的直线,css怎么实现文字居中两边横线效果
css怎么实现文字居中两边横线效果发布时间:2021-03-19 09:50:44 来源:亿速云阅读:92 作者:小新这篇文章将为大家详细讲解有关css怎么实现文字居中两边横线效果,小编觉得挺实 ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
原生js、css分别实现提示框渐渐消失的效果
效果展示: 方法一:(js) 思路:通过js修改dom的visibility.opacity的属性来实现效果. <div id="remind">{{ changeSt ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
js和css压缩工具 YUI Compressor 在线使用，效果拔群
在线使用.~~~ 效果拔群~ http://www.ostools.net/jscompress?type=3?from=20120909

JS配合css实现slide文字框缩放伸展效果

JS配合css实现slide文字框缩放伸展效果相关推荐

最新文章

热门文章