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 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
Vue 实现拨打电话操作
Nov 16 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 mvc开发模式的感想
2011/06/28 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php解析xml方法实例详解
2015/05/12 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解基于webpack搭建react运行环境
2017/06/01 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
项目采购员岗位职责
2014/04/15 职场文书
开展创先争优活动总结
2014/08/28 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
分居协议书范本
2014/11/03 职场文书
读后感作文评语
2014/12/25 职场文书
爱心捐款感谢信
2015/01/20 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
大学生活感想
2015/08/10 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
2019销售早会主持词
2019/06/27 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python