JS+DIV實(shí)現(xiàn)的卷簾效果示例
本文實(shí)例講述了JS+DIV實(shí)現(xiàn)的卷簾效果。分享給大家供大家參考,具體如下:
1、實(shí)例代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JS+DIV卷簾效果示例-F-BLOG</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #box{overflow:hidden;height:25px;border:1px solid #666;width:300px;background-color:#ccc;} p{padding:0px;margin:0px;line-height:25px;} #demo2{overflow:hidden;height:30px;border:1px solid #666;width:400px;background-color:#ff0000;} h4{padding:0px;margin:0px;height:30px;line-height:30px;} </style> <script type="text/javascript"> function reBox(Fid,defaultHeight,speed){ var bheight=defaultHeight; var doScroll; var a=0,b=0; var $=function(id){ return document.getElementById(id); } var createBox="<div id='"+Fid+"cbox'>"+$(Fid).innerHTML+"</div>"; $(Fid).innerHTML=createBox; $(Fid).onclick=function(){ if(a==0&&b==0){ b=1; doScroll=setInterval(function(){ if(bheight<$(""+Fid+"cbox").offsetHeight){ var dist=Math.ceil(($(""+Fid+"cbox").offsetHeight-bheight)/10); bheight=bheight+dist; $(Fid).style.height=bheight+"px"; }else{ clearInterval(doScroll); a=1; b=0; } },speed); } if(a==1&&b==0){ b=1; doScroll=setInterval(function(){ if(bheight>defaultHeight){ var dist=Math.ceil((bheight-defaultHeight)/10); bheight=bheight-dist; $(Fid).style.height=bheight+"px"; }else{ clearInterval(doScroll); a=0; b=0; } },speed); } } } window.onload=function(){ reBox("box",25,30); reBox("demo2",30,10); } </script> </head> <body> <P>示例一:縱向,目標(biāo)div:box,默認(rèn)高度:25px,速度:30毫秒,調(diào)用:reBox("box",25,30)</P> <div id="box"> <p>高級(jí)Web程序員</p> <p>1、了解HTTP協(xié)議,對(duì)Web程序性能優(yōu)化有一定經(jīng)驗(yàn)</p> <p>2、精通MySQL數(shù)據(jù)庫(kù),能熟練地運(yùn)用SQL語(yǔ)言,有豐富的數(shù)據(jù)建模經(jīng)驗(yàn), 熟悉SQL語(yǔ)句調(diào)優(yōu)和數(shù)據(jù)庫(kù)調(diào)優(yōu)</p> <p>3、熟練使用至少一種版本(CVS,SVN)控制工具</p> <p>4、熟悉PHP語(yǔ)言及常見(jiàn)擴(kuò)展(如mysql、pcre、xml等)</p> <p>5、熟悉面向?qū)ο?OO)程序設(shè)計(jì)</p> </div> <P>示例二:縱向,目標(biāo)div:demo2,默認(rèn)高度:30px,速度:10毫秒,調(diào)用:reBox("demo",30,10)</P> <div id="demo2"> <h4>數(shù)據(jù)挖掘工程師</h4> <p>1、對(duì)海量數(shù)據(jù)分析、挖掘有濃厚興趣,沉穩(wěn)厚重</p> <p>2、熟悉PHP、JavaScript、HTML設(shè)計(jì)開(kāi)發(fā)</p> <p>3、了解HTTP協(xié)議,對(duì)程序性能優(yōu)化有一定經(jīng)驗(yàn)</p> <p>4、精通MySQL數(shù)據(jù)庫(kù),能熟練地運(yùn)用SQL語(yǔ)言</p> </div> <p>PS:從效果看,速度為10毫秒比較好</p> <p>By:傅唯一 2009-1-26</p> </body> </html>
2、運(yùn)行效果圖如下:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js圖片卷簾門(mén)導(dǎo)航菜單特效代碼分享
- Javascript+CSS實(shí)現(xiàn)影像卷簾效果思路及代碼
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開(kāi)效果【推薦】
- JS實(shí)現(xiàn)可展開(kāi)折疊層的鼠標(biāo)拖曳效果
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)多級(jí)菜單效果
- js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果
- JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)折疊與展開(kāi)菜單效果代碼
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開(kāi)菜單的方法
- js實(shí)現(xiàn)超簡(jiǎn)單的展開(kāi)、折疊目錄代碼
- Js操作樹(shù)節(jié)點(diǎn)自動(dòng)折疊展開(kāi)的幾種方法
- 原生Js與jquery的多組處理, 僅展開(kāi)一個(gè)區(qū)塊的折疊效果
相關(guān)文章
chatGPT前端流式輸出js實(shí)現(xiàn)三種方法—fetch、SSE、websocket
項(xiàng)目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并實(shí)時(shí)顯示,在JavaScript中,使用Stream流通常指的是處理數(shù)據(jù)流的一種方式,它們?cè)试S數(shù)據(jù)被處理成塊,而不是一次性處理整個(gè)數(shù)據(jù)集,這對(duì)于處理大量數(shù)據(jù)或者來(lái)自網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)非常有用,2024-07-07JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了this 的工作原理,它會(huì)造成什么樣的問(wèn)題以及this 的相關(guān)例子。2014-05-05JS獲取當(dāng)前網(wǎng)頁(yè)大小以及屏幕分辨率等
這篇文章主要介紹了JS獲取當(dāng)前網(wǎng)頁(yè)大小以及屏幕分辨率等,方法雖簡(jiǎn)單,但比較實(shí)用,需要的朋友可以參考下2014-09-09js文本框輸入點(diǎn)回車(chē)觸發(fā)確定兼容IE、FF等
js文本框輸入點(diǎn)回車(chē)觸發(fā)確定兼容IE、FF等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程
下面小編就為大家?guī)?lái)一篇淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10javascript中的循環(huán)語(yǔ)句for語(yǔ)句深入理解
for循環(huán)是多數(shù)語(yǔ)言都有的。在javascript中,for循環(huán)有幾種不同的使用情況,下面為大家一一介紹下2014-04-04JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07