`
yxgblog
  • 浏览: 38414 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

随滚动条滚动的两侧的层

阅读更多

最近工作中遇到了随滚动条滚动的层,在网上查了下有很多关于这方面的内容,感觉有点麻烦,还是自己总结下的好,既简单又实用。代码如下:

 

<script type="text/javascript">
function FloatTop()
{
  var startX1 =document.body.scrollLeft+document.body.offsetWidth-115 ,startY1 = document.documentElement.scrollTop+100;
  var startX2 = 0,startY2 = document.documentElement.scrollTop+100;
  var ns = (navigator.appName.indexOf("Microsoft") != -1);
  var d = document;
  function ml(id,startX,startY)
  {
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
    el.x = startX;
    el.y = startY;
    return el;
  }
  window.stayTopLeft=function()
  {
   // var pY = ns ? document.documentElement.scrollTop : document.body.scrollTop;
   var pY=document.documentElement.scrollTop;
    ftlObj.y += (pY + startY1 - ftlObj.y)/8;
    ftlObj1.y += (pY + startY2 - ftlObj1.y)/8;
    ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-115, ftlObj.y);
    ftlObj1.sP(ftlObj1.x, ftlObj1.y);
    setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("rightaa",0,document.documentElement.scrollTop+100);
  ftlObj1 = ml("leftaa",5,document.documentElement.scrollTop+100);
  stayTopLeft();
}
FloatTop();

function closeDiv(objID)
{
 document.getElementById(objID).style.display="none";
 }
</script>

<div class="qq_box left" id="leftaa" name="leftaa" style="position:absolute; left:2px; top:107px;">ddd</div>

<div class="qq_box1 right" id="rightaa" name="rightaa" style="position:absolute; right:2px; top:107px;">ddd</div>

<a title="关闭窗口" href="javascript:void(0);" onclick="closeDiv('leftaa');">×</a>//关闭左侧窗口

<a title="关闭窗口" href="javascript:void(0);" onclick="closeDiv('rightaa');">×</a>//关闭右侧窗口

  • div.rar (9.5 KB)
  • 下载次数: 18
分享到:
评论

相关推荐

    CSS常用的代码单词

    - **取值**: `scroll`(随滚动条滚动)、`fixed`(固定位置)。 - **作用**: 创建固定的背景效果。 #### 五、可见性与溢出处理 **1. visibility** - **功能**: 设置元素的可见性。 - **取值**: `visible`(可见)...

    div+css属性.pdf

    4. `background-attachment`:决定背景图像是否随滚动条移动,`fixed` 为固定,`scroll` 为随滚动条移动。 5. `background-position`:设置图像位置,如 `background-position: left top;`。 6. 使用简写属性 `...

    常用css属性汇总大全

    - `background-attachment`:定义背景图像是否随滚动条移动,`fixed`为固定,`scroll`为随内容滚动。 - `background-position`:设置背景图像的位置,可以使用百分比或像素值。 4. **区块属性**: - `text-align...

    cypress usb开发教程

    - **滚动条与槽轮**:每根滚动条末端都有一个槽轮,当轨迹球滚动时,槽轮随之旋转。 - **LED与光敏晶体管**:位于槽轮两侧,通过遮挡光线的方式计算槽轮的旋转次数,进而确定鼠标的位移量。 #### 四、硬件实现 文档...

    常用css命令.docx

    4. **`background-attachment`**:设定背景图像是否随滚动条移动,`fixed`为固定,`scroll`为随页面滚动。 5. **`background-position`**:定义背景图像的位置,如`left top`表示左上角。 6. **简写方式**:`...

    CSS标签大全(最终整理版).docx

    - `background-attachment`:指定背景图片是否随滚动条移动,`fixed` 表示固定,`scroll` 表示滚动。 - `background-position`:设置背景图片的位置,如 `background-position: left top;`。 - `background`:...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    CSS标签大全.docx

    - `background-attachment`:设置背景图片是否随滚动而滚动,`fixed`表示固定,`scroll`表示跟随内容滚动。 - `background-position`:设定背景图片的位置,可以是水平和垂直的百分比或像素值。 - `background`:...

    DIV+CSS布局大全

    - `sticky`:粘性定位,基于用户滚动位置定位。 - **浮动**:通过`float`属性可以让元素脱离文档流,向左或向右移动。 #### 四、常见布局模式 ##### 4.1 水平居中布局 - **方法一**:使用`margin: auto`自动计算...

    CSS样式大全

    - `scroll`: 显示滚动条。 - `auto`: 自动处理。 ### 示例 ```css /* 示例CSS */ .color { color: #999999; /* 文字颜色 */ font-family: Arial, sans-serif; /* 字体 */ font-size: 9pt; /* 字体大小 */ ...

Global site tag (gtag.js) - Google Analytics