js实现简单的左右两边固定广告效果实例


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现简单的左右两边固定广告效果的方法。分享给大家供大家参考。具体分析如下:

大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说。

要点一:

var adtop = adleft.offsetTop;

获得元素距离上边的位置,在滚动的时候需要用到。

要点二:

adleft.style.top=adtop+(document.documentElement.scrollTop || document.body.scrollTop)+"px";
滚动时,给元素的上边位置赋值为元素本身距离上边的距离加上滚动的距离。
 
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#adleft,#adright{
width:30px;
height:100px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
#adleft{left:0; top:150px; }
#adright{right:0; top:150px;}
</style>
<script>
window.onload = function(){
 var adleft = document.getElementById("adleft");
 var adright = document.getElementById("adright");
 var adtop = adleft.offsetTop;
 window.onscroll = function(){
  adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
  adright.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
 }
} 
</script>
</head>
<body style="height:2000px;">
<h1>左右广告</h1>
<div id="adleft">左边广告</div>
<div id="adright">右边广告</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php显示页码分页类的封装
2017/06/08 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
如何运行带参数的python脚本
2019/11/15 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
教学个人的自我评价分享
2014/02/16 职场文书
应用外语系自荐信
2014/06/26 职场文书
负责培养人意见
2015/06/05 职场文书
高中开学感言
2015/08/01 职场文书
初二数学教学反思
2016/02/17 职场文书
检讨书怎么写?
2019/06/21 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Golang二维数组的使用方式
2021/05/28 Golang