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操作Cookies包括(读取添加与删除)
Dec 26 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 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 auth_http类库进行身份效验
2009/03/19 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python字符串详细介绍
2015/05/09 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
速记Python布尔值
2017/11/09 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python关闭占用端口方式
2019/12/17 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
实习期自我鉴定
2013/10/11 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
大学课外活动总结
2014/07/09 职场文书
小学英语教学随笔
2015/08/14 职场文书
如何写好竞聘报告
2019/04/03 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL