當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS配合css实现slide文字框缩放伸展效果
生活随笔
收集整理的這篇文章主要介紹了
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文字框缩放伸展效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OA项目14：权限管理功能分析
- 下一篇： javascript---》argume