js实现随屏幕滚动的带缓冲效果的右下角广告代码
更新时间：2015年09月04日 12:04:54 作者：企鹅
这篇文章主要介绍了js实现随屏幕滚动的带缓冲效果的右下角广告代码,涉及javascript基于数学运算及定时函数动态操作页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码。分享给大家供大家参考。具体如下：
一个随屏幕自动滚动的右下角广告代码，这里请注意几个参数：
id 你要滚动的内容的id
r 放在左边还是右边 默认是右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动(ie6固定无效)
是不是很实用呢，这个版本经过作者二次修正，兼容性还不错。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-right-buttom-float-follow-scroll-adv-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>随屏幕滚动的带缓冲效果的右下角广告</title>
<style>
html,body{
height:2000px;
}
</style>
</head>
<body>
<div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >拖动滚动条试试哦~</div>
</body>
</html>
<script>
function scroll(p){
var d = document,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent);
if(o){
o.style.cssText +=";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.r?'left':"right")+":0;"+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
if(!p.f||ie6){
-function(){
var t = 500,st = d.documentElement.scrollTop||d.body.scrollTop,c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);//如果你是html 4.01请改成d.body,这里不处理以减少代码
c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10);
setTimeout(arguments.callee,t)
}()
}
}
}
scroll({
id:'aa'
})
</script>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了通过js修改input、select默认字体颜色,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JS实现的最简Table选项卡效果,涉及简单的JavaScript响应鼠标事件切换样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JavaScript调用模式与this关键字绑定的关系 的相关资料,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了js实现左侧网页tab滑动门效果代码,涉及JavaScript页面元素的遍历及元素属性动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
使用 Angular 服务器端渲染 Transfer State Service
这篇文章主要介绍了使用 Angular 服务器端渲染 Transfer State Service,假设我们使用 Angular Universal 开发一个服务器端渲染的 Angular 应用，这个应用会消费一个第三方的 Restful API2022-06-06
下面小编就为大家带来一篇javascript对象的相关操作小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript中常用的六种互动方法示例，是个人的一些经验总结，这里分享给大家，希望对大家能够有所帮助。2015-03-03
这篇文章主要介绍了Javascript动画的实现原理浅析,本文用两个实例来解释Javascript动画的实现原理,需要的朋友可以参考下2015-03-03
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
通过 bootstrap-table 的Column 配置项中的formatter，将获取到的数据转换为包含数据的 select 控件。然后根据用户选择项更新对应单元格数据，最后通过getallselection方法获取所选行数据2017-07-07
本文汇总了Javascript中两个对象的比较、不同类型的比较以及对象跟原始值的比较，并进行了实例演示，希望能帮助到有需要的朋友们。2016-07-07
最新评论