div在頁面中上下左右固定位置跟隨的浮動(dòng)方式實(shí)現(xiàn)

源碼資料　時(shí)間:2013-03-13　作者/發(fā)布人:科杰在線　點(diǎn)擊:3251

div固定懸浮（左側(cè)、右側(cè)、任意相對(duì)位置）,兼容多瀏覽器。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function scrollx(p) {
var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;
if (o) {
  cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
  if (p.r != undefined && p.l == undefined) {
   o.style.cssText += cssPub + ('right:'+p.r+'px;');
  } else {
   o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
  }
  if(p.f&&ie6){
   cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
   cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
   if (p.r != undefined && p.l == undefined) {
    o.style.cssText += cssRight + cssTop;
   } else {
    o.style.cssText += cssTop;
   }
   dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
  }else{
   if(!p.f){
    w.onresize = w.onscroll = function(){
     clearInterval(timer);
     timer = setInterval(function(){
      //雙選擇為了修復(fù)chrome 下xhtml解析時(shí)dd.scrollTop為 0
      var st = (dd.scrollTop||db.scrollTop),c;
      c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
      if(c!=0){
       o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
      }else{
       clearInterval(timer);
      }
     },10)
    }
   }
  }
}
}
</script>
</head>
<body>
<div style="width:700px; margin:0 auto; height:1000px; background:#ccc">
<div id="float_father">相對(duì)固定</div>
<div id="float_father_2">相對(duì)固定（動(dòng)）</div>
<p>測(cè)試內(nèi)容</p>
<p>測(cè)試內(nèi)容</p>
</div>
<div id="float_left">左側(cè)固定</div>
<div id="float_right">右側(cè)固定</div>
<script type="text/javascript">
//左右側(cè)固定浮動(dòng)的div建議放在html的最低部
//右側(cè)固定
scrollx({id:'float_right', r:0, t:200, f:1});
//左側(cè)固定
scrollx({id:'float_left', t:200, f:1});
//相對(duì)父級(jí)相定固定
scrollx({id:'float_father', l:300, t:200, f:1});
//頁面滾動(dòng)同時(shí)滾動(dòng)固定對(duì)像
scrollx({id:'float_father_2', l:500, t:300, f:0});
/*
scrollx參數(shù)說明

id：浮動(dòng)對(duì)象的id
r：右邊距（窗口右邊距，不寫為靠左浮動(dòng)）
l：左邊距（距離父級(jí)對(duì)象的左邊距） “r”和“l”只能有其中一個(gè)參數(shù)
t：上邊距（默認(rèn)貼著底邊，0是貼著頂邊）
f：1表示固定（不寫或者0表示滾動(dòng)）
*/
</script>
</body>
</html>

--------------------------全文完----------------------------

0% (0)

生活常識(shí)
創(chuàng)意無限
源碼資料
資源中心
裝修日記
學(xué)駕駛經(jīng)歷

精品久久亚洲_69pao在线成人免费视频_黄色三级网络_亚洲国产精品激情在线观看

您的位置: 首頁 > 源碼資料

div在頁面中上下左右固定位置跟隨的浮動(dòng)方式實(shí)現(xiàn)

源碼資料　時(shí)間:2013-03-13　作者/發(fā)布人:科杰在線　點(diǎn)擊:3251

生活常識(shí)

創(chuàng)意無限

源碼資料

資源中心

點(diǎn)擊排行

熱點(diǎn)關(guān)注

新聞動(dòng)態(tài)

精品久久亚洲_69pao在线成人免费视频_黄色三级网络_亚洲国产精品激情在线观看

您的位置: 首頁 > 源碼資料

div在頁面中上下左右固定位置跟隨的浮動(dòng)方式實(shí)現(xiàn)

源碼資料 時(shí)間:2013-03-13 作者/發(fā)布人:科杰在線 點(diǎn)擊:3251

生活常識(shí)

創(chuàng)意無限

源碼資料

資源中心

點(diǎn)擊排行

熱點(diǎn)關(guān)注

新聞動(dòng)態(tài)

源碼資料　時(shí)間:2013-03-13　作者/發(fā)布人:科杰在線　點(diǎn)擊:3251