導航:首頁 > 編程語言 > 側邊欄展開收縮js特效

側邊欄展開收縮js特效

發布時間:2024-09-03 04:30:34

『壹』 想js代碼在頁面窗口右側彈出一個側邊欄div,但是不知道問題出在哪

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>222</title>
<style>
html,body{width:100%;height:100%;overflow:hidden;}
#div1{width:100px;height:200px;background:red;top:300px;right:-100px;position:absolute;}
#div1span{width:20px;height:60px;line-height:20px;top:70px;right:100px;background:yellow;text-align:center;position:absolute;}
</style>
</head>
<body>
<divid="div1"><span>111</span></div>
<script>
window.onload=function(){
varoDiv=document.getElementById('div1');
oDiv.style.right='-100px';
oDiv.onmouseover=function(){
startMove(1);
};
oDiv.onmouseout=function(){
startMove(0);
}
};
vartimer=null;
functionstartMove(iTarget){
varoDiv=document.getElementById('div1');
varspeed=1;
clearInterval(timer);
timer=setInterval(function(){
if(iTarget){
oDiv.style.right=parseFloat(oDiv.style.right)+speed+'px';
if(parseFloat(oDiv.style.right)>=0){
oDiv.style.right='0';
window.clearInterval(timer);
}
}else{
oDiv.style.right=parseFloat(oDiv.style.right)-speed+'px';
if(parseFloat(oDiv.style.right)<=-100){
oDiv.style.right='-100px';
window.clearInterval(timer);
}
}
},10);
}
</script>
</body>
</html>

我感覺你的邏輯有點太復雜了,既然都已經定位了,為何不直接用right值來調整呢,上面代碼是用改變right值來實現的,並且這種效果通過css的transition更容易實現,可能是你為了專門練習JS吧。

『貳』 如何讓WordPress側邊欄的指定模塊隨頁面滾動

本文接著來告訴你如何讓你的整個側邊欄或者側邊欄的指定某個模塊在頁面滾動的時候隨著窗口一起滾動。聽起來是不是很炫呢。滾動效果,相信大家已經見過太多,無外乎就是載入一個js特效。開始之前為大家介紹一下側邊欄的構成部分,因為本文採用js特效可以具體到側邊欄某模板(比方說A)到達頂部時,指定模塊(比方說B)開始隨頁面滑動。側邊欄是怎麼樣的構造側邊欄可以通過小工具或者自行編輯sidebar.php代碼來完成,模塊布局靈活,一般包括近期文章,近期評論,標簽雲等等等。下面就是一個常見的側邊欄結構,模塊id是我自行編寫的,方便大家辨識。...//近期文章 ...//熱門文章 ...//標簽雲 ...//近期評論 ...//連接表 上面就是一個簡單的側邊欄構造,注各個模塊的id,在下一步滾動代碼中將得到對應。如何讓側邊欄滾動起來下面就以熱門文章、標簽雲兩個相鄰模塊作為指定滾動模塊,來說明指定模塊如何實現隨窗口滑動。varrollStart = $('.recentcomments'), //近期評論模塊到達瀏覽器頂部時,指定模塊開始滾動rollOut = $('.recentcomments,.blogroll'); //近期評論以下模塊隱藏包括最新評論,指定模塊顯現rollStart.before(''); //這個可以不用修改,與下面保持一致varoffset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(), rollSet = $('.hotposts,.tagcloud'); //指定滾動的模塊idobjWindow.scroll(function() { if (objWindow.scrollTop() > offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.rollbox');//注意與上面的保持一直,不用做修改。 } rollOut.fadeOut(); rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400); } else { rollOut.fadeIn(); rollBox.hide().stop().animate({marginTop:0},400); } });你可以將其粘貼到主題js文件中,也可以用...將其括起來放置到header頭文件中。代碼說明:隨著網頁滾動條的滑動,當近期評論模塊到達瀏覽器頂部,近期評論以下的模塊包括近期評論隱藏消失,指定模塊熱門文章和標簽雲隨即顯示,開始隨窗口滾動。此處代碼以最新評論模塊為臨界點,過了此臨界點指定模塊顯現開始滾動。代碼中模塊的id一定要和側邊欄sidebar.php模塊的id保持一致。請結合代碼中的說明理解。註明:指定滾動模塊整體高度不要超過瀏覽器視窗的高度,否者會無限向下延伸。好了,就這樣吧。0

『叄』 html(js,jquery)實現伸縮側邊欄

發到你郵箱了,直接運行layout.html試試,看是不是你想要的效果,是的話,給分哦!

『肆』 js 網頁的側邊欄,滾動到頁面的某個高度之後才出現,剛開始不出現,返回也自動隱藏

JQurey的話var offset = $(selector).scrollTop(),來offset就是高度。
根據這個判斷自一下就行了。
offset<100時,$(selector).hide(),
>100時,$(selector).show();
邏輯很簡單的。
原生也差不多的。

閱讀全文

與側邊欄展開收縮js特效相關的資料

熱點內容
電腦列印東西用什麼文件 瀏覽:473
win8如何關掉程序 瀏覽:131
編程怎麼編寫手機簡訊驗證 瀏覽:791
牽手是什麼網站 瀏覽:379
哪個編程課是直播 瀏覽:272
win10顯示不出手機文件夾 瀏覽:705
word文件閱讀器 瀏覽:766
網站小圖標怎麼弄 瀏覽:58
怎麼弄電腦密碼 瀏覽:114
labview中將表格轉為excel文件 瀏覽:454
口袋腕力升級 瀏覽:436
word刻錄到光碟刻錄大師 瀏覽:124
更改壓縮文件後卡死是什麼原因 瀏覽:201
電腦上如何發qq紅包 瀏覽:230
如何刪除word的空白頁 瀏覽:822
創建swap文件 瀏覽:468
數控銑床編程在哪裡編寫 瀏覽:544
iphone文藝軟體 瀏覽:938
紀元1404人口升級 瀏覽:527
公司網路如何設置自己路由器 瀏覽:649

友情鏈接