js实现随屏幕滚动的带缓冲效果的右下角广告代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码。分享给大家供大家参考。具体如下:

一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数:

id 你要滚动的内容的id
r 放在左边还是右边 默认是右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动(ie6固定无效)
是不是很实用呢,这个版本经过作者二次修正,兼容性还不错。

运行效果截图如下:

js实现随屏幕滚动的带缓冲效果的右下角广告代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
js 字符串转换成数字的三种方法
Mar 23 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
javascript入门教程基础篇
Nov 16 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
跟混乱的页面弹窗说再见
Apr 11 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
企划经理的岗位职责
2013/11/17 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
动物科学专业求职信
2014/07/27 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
公诉意见书范文
2015/06/05 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书