監(jiān)理公司管理系統(tǒng) | 工程企業(yè)管理系統(tǒng) | OA系統(tǒng) | ERP系統(tǒng) | 造價咨詢管理系統(tǒng) | 工程設計管理系統(tǒng) | 簽約案例 | 購買價格 | 在線試用 | 手機APP | 產(chǎn)品資料
X 關閉

關于用側欄跟隨滾動條來提高瀏覽器--服裝進銷存軟件免費版

申請免費試用、咨詢電話：400-8352-114

   

現(xiàn)在許多web2.0風格的網(wǎng)站都喜歡用“側欄跟隨”的效果，就是當一個頁面很長的時候，設定側欄內容會跟隨滾動條，這種效果適用于評論較多、內容較長的網(wǎng)站。

這種特效對提高網(wǎng)站瀏覽量、文章點擊率、廣告點擊量都有一定效果。

也能讓服裝進銷存軟件免費版的朋友們有一個好的理解。

效果演示：

具體實例，請參見網(wǎng)絡文摘欄目隨機文章，未來主博客不一定會用。

代碼如下：

CSS部分：

/*側欄跟隨*/

#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注：每個網(wǎng)站的側欄寬度不同，可根據(jù)你網(wǎng)頁的寬度調整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/zb_users/theme/LuSongSong/script/util.js

網(wǎng)頁代碼部分：



這里寫你網(wǎng)站的代碼與標簽。


注：這里可以放文章列表、聯(lián)盟廣告，總之是個提高點擊率的好方法。Z-blog用戶把此段代碼添加到single.html的側欄位置即可。

特別提示：此代碼試用與任何CMS系統(tǒng)，但該特效在IE6下無法實現(xiàn)，其余瀏覽器均沒問題，同時側欄其余部分應使用靜態(tài)文件調用，使用JS調用欄目會出現(xiàn)代碼重疊現(xiàn)象，調用聯(lián)盟廣告沒問題。

 北京泛普和科技有限公司（www.qykh2009.com）服裝進銷存軟件免費版部分析總結供稿   轉載請表明出處

發(fā)布：2007-04-20 14:35    編輯：泛普軟件 · xiaona    [打印此頁]    [關閉]
相關文章：