導航:首頁 > 編程語言 > 側邊欄展開收縮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特效相關的資料

熱點內容
微軟平板開機密碼設置 瀏覽:978
linux刪除一行的快捷鍵 瀏覽:269
win10改hosts文件 瀏覽:354
數據博世怎麼樣 瀏覽:411
用tar解包沒有那個文件或目錄 瀏覽:307
錄歌教程 瀏覽:604
java小數進制轉換 瀏覽:270
80後qq頭像女生 瀏覽:388
word2013頁面顏色 瀏覽:661
linux系統安裝顯卡驅動 瀏覽:243
手機安卓培訓機構 瀏覽:819
英語版本的哈面寶寶 瀏覽:567
手機動態壁紙教學視頻教程 瀏覽:543
網路攝像機sip 瀏覽:757
湘潭編程學校哪裡好 瀏覽:389
win10設置桌面小圖標怎麼去掉嗎 瀏覽:122
網路安全創業 瀏覽:787
修改linux 瀏覽:464
如何編程計算機cpu高佔用程序 瀏覽:808
程序員活動策劃方案 瀏覽:130

友情鏈接