第1217天:div固定悬浮(左侧、右侧、任意相对位置),系统学习js(7)

星期一 多云 18~23℃

div固定悬浮(左侧、右侧、任意相对位置)

根据网上的一个右侧固定浮动div修改。兼容多浏览器。

<!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(){
      //双选择为了修复chrome 下xhtml解析时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">相对固定</div>
 <div id="float_father_2">相对固定(动)</div>
 <p>测试内容</p>
 <p>测试内容</p>
</div>
<div id="float_left">左侧固定</div>
<div id="float_right">右侧固定</div>
<script type="text/javascript">
//左右侧固定浮动的div建议放在html的最低部
//右侧固定
scrollx({id:’float_right’, r:0, t:200, f:1});
//左侧固定
scrollx({id:’float_left’, t:200, f:1});
//相对父级相定固定
scrollx({id:’float_father’, l:300, t:200, f:1});
//页面滚动同时滚动固定对像
scrollx({id:’float_father_2′, l:500, t:300, f:0});
/*
scrollx参数说明

id:浮动对象的id
r:右边距(窗口右边距,不写为靠左浮动)
l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数
t:上边距(默认贴着底边,0是贴着顶边)
f:1表示固定(不写或者0表示滚动)
*/
</script>
</body>
</html>


系统学习js(7)

《JavaScript+DOM编程艺术》第四章 案例研究:JavaScript美术馆 (4.4)

childNodes / nodeType / nodeValue / firstChild / lastChild


公交 91 路车队打电话来了

上次投诉的事终于有了下文。

91路车队的人在电话里说是估计要到年底才会全部换成那种比较大的新车子,目前是只有8辆新车子。

看来还是有望改观的,期待。。。

另外,上周在杭州网、新动网、19楼同步发了帖,反响强烈,尤其是杭州网上,很快就升到热帖了。

网络力量强大。


MeYoung

  • 修改完善浮动js;
  • 合并新增/修改交易单。

RSS

上一篇:

下一篇:

Comments (5)

  1. 蜗蜗

    学习了,楼主有毅力啊!

    回复::)

    zhugao 回复于 2013-5-19 22:27:46

  2. 太感谢了

    回复::)

    zhugao 回复于 2012-10-11 22:59:20

  3. 骨头

    请问你这个BLOG用的什么程序呢?请发到我邮箱哦。

    回复:Z-Blog

    zhugao 回复于 2012-10-5 23:28:04

  4. 骨头

    相当的有用,非常感谢。

    回复:不客气:)

    zhugao 回复于 2012-10-5 23:27:13

  5. 空尘

    太感谢了!找了好久终于在你这找到了

    回复:不客气,保重身体:)

    由 zhugao 于 2011-9-22 9:00:46 最后编辑

卷毛进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注