當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/4/14 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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文字框缩放伸展效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。