`
yangzhichao
  • 浏览: 13417 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
社区版块
存档分类

网页元素跟随BODY上下滚动JS组件

阅读更多
UpDownRoller.prototype.uid=100;
 function UpDownRoller(objID,selfName){
   var obj=document.getElementById(objID);
   obj.style.position="relative";
   obj.style.zIndex=this.uid++;
   this.target=obj;
   this.autoRoll=false;
   this.selfName=selfName;
   this.timerID=null;
 }
 UpDownRoller.prototype.setAutoRoll=function(b){
   if(this.autoRoll==b){
      return null;
   }
   this.autoRoll=b;
   if(b){
     if(this.timerID){
        window.clearInterval(this.timerID);
     }
     this.timerID=window.setInterval(this.selfName+".roll()",10);
   }else{
     this.target.style.pixelTop=0;
   }
 }
 UpDownRoller.prototype.roll=function(){
   if(!this.autoRoll){
       return false;
   }
   var t=this.target;
   t.style.pixelTop=document.body.scrollTop;
 }
 if(document.getElementById("floater")){
   var ft=new UpDownRoller("floater","ft");
   ft.setAutoRoll(true);
 }
分享到:
评论

相关推荐

    弹出框随滚动条滚动

    标题中的“弹出框随滚动条滚动”是一个前端开发中的常见需求,主要涉及到网页交互设计。当用户在页面上滚动时,某些特定的弹出框(如提示信息、菜单或对话框)需要保持在用户的视野内,这通常通过JavaScript或者CSS...

    bootstrap监听滚动实现头部跟随滚动

    Bootstrap是一个非常流行的前端开发框架,它简化了网页和应用程序的开发工作,提供了一套基于HTML、CSS和JavaScript的组件和插件。Bootstrap主要包含一套响应式的布局组件,一套按钮、表单、导航和其它界面元素的...

    vue滚动tab跟随切换效果

    在Vue.js中实现滚动tab跟随切换效果是一种常见的增强用户体验的交互设计,特别是在移动应用或响应式网站中。这种效果使得用户在浏览长页面时能够轻松地切换不同内容区域。以下将详细讲解如何在Vue中创建这个功能。 ...

    前端实现鼠标跟随动画

    在前端开发中,鼠标跟随动画是一种常见的交互设计,它可以增加用户与网页的互动性,提升用户体验。本资源提供了五种不同的方法来实现这种效果,主要适用于Vue框架。下面将详细介绍这些实现方式及其相关知识点。 一...

    飘浮广告的网页源代码

    在网页设计中,飘浮广告(Floating Ad)是一种常见的在线广告形式,它可以在用户浏览页面时始终固定在屏幕的某个位置,甚至跟随用户的滚动而上下移动。这种广告设计旨在提高广告的可见性和点击率,因为它总是保持在...

    百度返回顶部JS源代码+返回顶部图片

    在网页设计中,这种图片可能会被设置为一个浮动元素,跟随用户滚动,始终显示在屏幕的一角,例如右下角。当用户点击这个图片时,会触发返回顶部的动作。这个图片的设计通常要求简洁明了,以便用户一眼就能识别其功能...

    Bootstrap滚动监听(Scrollspy)插件详解

    Bootstrap滚动监听(Scrollspy)插件是一个非常实用的交互组件,它主要用于自动更新网页的导航菜单,以便在用户滚动页面时高亮当前可视区域的相应导航项。这个插件是Bootstrap框架的一部分,能够为用户提供更好的...

    飘浮、对联及悬浮广告代码大全

    通过监听`scroll`事件并计算广告元素的新位置来实现广告跟随页面滚动的效果。`MoveLeftLayer`和`MoveRightLayer`函数分别用于计算左侧和右侧广告的新位置。 ##### (三)关闭按钮的实现 在Flash中创建一个关闭按钮...

    jquery+css3左右滑块(背景也跟随切换)

    在`right-slider`中,为每张图片创建一个`<div>`元素,并设置相应的CSS3过渡效果。 ### 二、CSS3样式设定 CSS3在实现滑块效果中起到关键作用,主要涉及以下方面: 1. **全屏布局**:使用`height: 100vh;`使容器...

    vue封装一个简单的div框选时间的组件的方法

    在Vue组件的`created`或`mounted`生命周期钩子中,可以设置必要的初始状态,例如创建一个选框的div元素,并将其添加到body中。这样确保它能覆盖整个页面,不受父级元素的影响。同时,需要计算初始的滚动位置,以...

    vue实现拖拽的简单案例 不超出可视区域

    在`onmousemove`事件处理函数中,我们持续更新元素的`left`和`top`样式属性,使元素跟随鼠标移动。同时,我们检查元素的位置,确保它不会超出浏览器的可视区域。如果元素左侧或顶部位置小于0,我们将它们设置为0,以...

    js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

    在JavaScript中实现一个完美的拖拽效果,涉及到的主要技术包括事件监听、元素定位以及动画效果的创建。这个场景中,我们不仅需要使一个可拖动的层(div)可以在页面上自由移动,还要能够记录和回放拖动轨迹,并且...

    前端大厂最新面试题-pull_up_loading_pull_down_refresh.docx

    在`touchmove`事件中,跟踪手指的移动并计算差值,如果差值大于零且小于允许的最大滑动距离,可以使用CSS3的`translateY`属性让元素跟随手势下移。同时,当元素滑动达到最大值时,`touchend`事件会被触发,此时执行...

    js实现百度登录框鼠标拖拽效果

    - **鼠标事件2 - mousemove**:当鼠标移动时,检查元素是否处于可拖动状态,如果是,则更新元素的位置,使其跟随鼠标移动,同时减去初始鼠标位置与元素位置的差值。 - **鼠标事件3 - mouseup**:鼠标松开时,取消...

    layui实现左侧菜单点击右侧内容区显示

    layui是一款轻量级的前端框架,它为开发者提供了一套完整的UI解决方案,包括表格、表单、弹窗、导航等组件。在这个问题中,我们主要讨论如何使用layui来实现左侧菜单点击后,右侧内容区动态加载对应的内容。 首先,...

    rrweb旨在利用现代浏览器所提供的强大API录制并回放任意web界面中的用户操作

    target: document.body, // 指定回放的目标元素 }); ``` ### 注意事项 - rrweb的性能可能会受到大量事件的影响,因此在实际使用中需要考虑事件过滤和压缩。 - 隐私保护:由于rrweb可以记录详细的用户交互,因此在...

    websites:教如何创建快速负担得起的网站

    Bootstrap3 是一个开源的前端框架,由 Twitter 开发,它包含了 CSS、JavaScript 和组件,使得创建响应式布局和移动设备优先的网页变得简单。响应式设计意味着网站可以根据访问设备的屏幕尺寸自动调整布局,确保在...

    layer实现弹出层自动调节位置

    在前端开发中,弹出层(弹窗、模态框等)是一个常用的功能组件,它用于在用户界面上提供额外的信息或者执行某些操作而不离开当前页面。由于页面内容的长度可能因不同的显示需求和场景而变化,这就要求弹出层能够根据...

    jQuery 浮动广告实现代码

    当用户滚动页面时,浮动广告会跟随滚动条的变化而动态调整其位置,从而始终保持在用户的视线范围内。具体来说,通过计算当前滚动条距离顶部的距离(`scrollTop()`)加上一个固定的偏移量(如100像素),再将其设置为广告...

Global site tag (gtag.js) - Google Analytics