JS实现兼容性较好的随屏滚动效果


Posted in Javascript onNovember 09, 2015

本文实例讲述了JS实现兼容性较好的随屏滚动效果。分享给大家供大家参考,具体如下:

代码中的参数解释如下:

id 你要滚动的内容的id
l 横坐标的位置 不写为紧贴右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动。

本代码滚动时不会出现抖动,随着屏幕大小而变动

运行效果截图如下:

JS实现兼容性较好的随屏滚动效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>随屏滚动</title>
<style>
 html,body{
  padding:0;
  margin:0;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >我在随屏滚</div>
 <div id="bb" style="width:200px;height:200px;background:#c0c0c0;" >我静止不动</div>
 <div style="width:100%;height:500px;background:#000"></div>
 <div style="width:100%;height:500px;background:green"></div>
 <div style="width:100%;height:500px;background:red"></div>
</body>
</html>
<script>
function scroll(p){
 var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style;
  if(o){
  o.style.cssText +=";position:"+(p.f&&!ie?'fixed':'absolute')+";"+(p.l==undefined?'right:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
   if(p.f&&ie){
   o.style.cssText +=';left:expression(body.scrollLeft + '+(p.l==undefined?db.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(body.scrollTop +'+(p.t==undefined?db.clientHeight-o.offsetHeight:p.t)+'+ "px" );'
    db.style.cssText +=";background-image:url(about:blank);background-attachment:fixed;"
   }else{
    if(!p.f){
     w.onresize = w.onscroll = function(){
      var timer,timer1;
      return function(){
       if(timer)
        clearTimeout(timer);
       timer = setTimeout(function(){
        timer1 = setInterval(function(){
         var st = db.scrollTop,c;
         c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);
         if(c!=0){
          o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
         }else{
          clearInterval(timer1);  
         }
        },10)
       },100)//控制滚动的频率越大频率越慢
      }
     }()
    }
   }
  } 
 }
 scroll({
  id:'aa'
 })
  scroll({
  id:'bb',
  l:0,
  t:200,
  f:1
  })
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
jquery常用操作小结
Jul 21 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
初步了解javascript面向对象
Nov 09 #Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 #Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
jquery实现简易的移动端验证表单
Nov 08 #Javascript
You might like
PHP学习之整理字符串
2011/04/17 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php eval函数一句话木马代码
2015/05/21 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript document.images实例
2008/05/27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python 同时读取多个文件的例子
2019/07/16 Python
通俗讲解python 装饰器
2020/09/07 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
开办饭店创业计划书
2013/12/28 职场文书
未婚证明书模板
2014/10/08 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
医院病假条怎么写
2015/08/17 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS