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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python实现将Excel转换成为image的方法
2018/10/23 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
明信片寄语大全
2014/04/08 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
公司搬迁通知
2015/04/20 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Python数据结构之队列详解
2022/03/21 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL