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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
利用js实现简易红绿灯
Oct 15 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
图形数字验证代码
2006/10/09 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
没有document.getElementByName方法
2013/08/19 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
vue组件的写法汇总
2018/04/12 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Python中int()函数的用法浅析
2017/10/17 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python实现取余操作的简单实例
2020/08/16 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
村级四风对照检查材料
2014/08/24 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
导游带团欢迎词
2015/09/30 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript