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调用webservice中的方法实现思路及代码
Feb 25 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
原生js 实现表单验证功能
Feb 08 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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP微商城开源代码实例
2019/03/27 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python实现连接mongodb的方法
2015/05/08 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python list多级排序知识点总结
2019/10/23 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
学前教育教师求职自荐信
2013/09/22 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
公务员检讨书
2014/11/01 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书