- 掛牌上市企業
- 60秒人工響應
- 99.99%連通率
- 7*24h人工
- 故障100倍補償
提高瀏覽量的特效：側欄跟隨滾動條 |
| 發布時間: 2012/9/12 10:34:41 |
|
現在許多web2.0風格的網站都喜歡用“側欄跟隨”的效果，就是當一個頁面很長的時候，設定側欄內容會跟隨滾動條，這種效果適用于評論較多、內容較長的網站。
這種特效對提高網站瀏覽量、文章點擊率、廣告點擊量都有一定效果。
效果演示：
具體實例，請參見網絡文摘欄目隨機文章，未來主博客不一定會用。
代碼如下：
CSS部分：
/*側欄跟隨*/
#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}
注：每個網站的側欄寬度不同，可根據你網頁的寬度調整div1的寬度，我的是width:250px;，把這段代碼添加到你的CSS文件中即可。
JS部分：
//側欄跟隨
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
注：這段代碼可放入任意JS文件中，比如我放在了util.js 文件里，。 zblog《低調與華麗》模板的用戶可直接下載該JS文件替換。
下載地址：http://lusongsong.com/themes/LuSongSong/script/util.js
網頁代碼部分：
<div id="box">
<div id="float" class="div1">
這里寫你網站的代碼與標簽。
注：這里可以放文章列表、聯盟廣告，總之是個提高點擊率的好方法。Z-blog用戶把此段代碼添加到single.html的側欄位置即可。
特別提示：此代碼試用與任何CMS系統，但該特效在IE6下無法實現，其余瀏覽器均沒問題，同時側欄其余部分應使用靜態文件調用，使用JS調用欄目會出現代碼重疊現象，調用聯盟廣告沒問題。 本文出自：億恩科技【www.ibaoshan.net】 |
0371-60135900
京公網安備41019702002023號
香港服務器租用
美國服務器租用
電信骨干機房
聯通骨干機房
