熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript仿淘寶智能浮動

2013-11-15 12:03:30  來源: JSP教程 

  我們經常在淘寶網看到這樣的特效商品列表特別長而商品列名稱始終保持在最頂端如果你把滾動條滾動至最上邊了那麼它會自動判斷是否到頂端了然後一直置頂從而不怕遮擋

  這種特效是通過JavaScript和CSS實現的在實際開發中有不少用途下面是我找到的一個使用JavaScript制作的仿淘寶智能浮動的源代碼兼容性不錯在IEFirefoxChrome下都能正常工作

  在ZBlog中使用這個特效代碼需要注意如果在側邊欄使用則需要注意側欄中的欄目不能使用JavaScript動態加載必須用靜態的格式否則在JavaScript會錯誤的計算頁面高度上下滾動的時候會出現錯位現象

  JavaScript仿淘寶智能浮動 教程

  以下是相關代碼

  JavaScript 代碼

  (function(){

  var oDiv=documentgetElementById("float");

  var H=iE;

  var Y=oDiv;

  while(Y){H+=YoffsetTop;Y=YoffsetParent};

  iE=windowActiveXObject&&!windowXMLHttpRequest;

  if(!iE){

  windowonscroll=function()

  {

  var s=documentbodyscrollTop||documentdocumentElementscrollTop;

  if(s>H){oDivclassName="div div";if(iE){oDivstyletop=(sH)+"px";}}

  else{oDivclassName="div";}

  };

  }

  })();

  HTML 代碼

  HTML 代碼

  <div id="box">

  <div id="float" class="div">

  //隨滾動移動的部分代碼

  </div>

  </div>

  CSS 代碼

  #box{float:left;position:relative;width:px;}

  div{}

  div{position:fixed;_position:absolute;top:px;zindex:;}


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20184.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.