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

熱點內容
win7如何修改用戶密碼 瀏覽:169
逆戰輔助銷售網站源碼 瀏覽:100
陝西回收貼片機如何編程 瀏覽:948
以前鮑魚網站里的小說怎麼沒了 瀏覽:267
matlab程序如何調試 瀏覽:915
ps工程文件怎麼發 瀏覽:95
word文件如何批量插入蓋章 瀏覽:548
jscheckbox 瀏覽:338
pics規則文件 瀏覽:644
如何從數據中找出問題和機會 瀏覽:668
寫作投稿在哪個網站好 瀏覽:895
絕代雙驕版本 瀏覽:380
手機app在哪裡找的對象靠譜嗎 瀏覽:919
win10文件默認顯示ck方式 瀏覽:829
如何更改桌面文件圖標 瀏覽:418
word2010如何去掉背景 瀏覽:632
adp文件如何打開 瀏覽:531
ug編程怎麼導出零件 瀏覽:586
asp在線文件管理系統 瀏覽:468
tks文件如何分解 瀏覽:132

友情鏈接