js实现简单的左右两边固定广告效果实例
更新时间：2015年04月10日 10:55:11 作者：jingangel
这篇文章主要介绍了js实现简单的左右两边固定广告效果,实例分析了javascript实现固定广告的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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实现按键精灵的原理分析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
后台从数据库取出时间，JSON格式化后再传到gridpanel，这时时间变成了：/Date(32331121223)/这样的格式,本文将详细介绍解决Extjs显示从数据库取出时间转换JSON后的出现问题2012-11-11
这篇文章主要介绍了webpack实用小功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
这篇文章主要介绍了简单理解js的prototype属性及使用 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
我们通常在使用cookie的时候一般都只是局限在本站内使用，也就是只在一个域名下使用2011-11-11
注册的时候需要发送验证激活帐号的邮件，为了避免邮件的多次重复发送，所以可以在点击了发送后，设置按钮变灰，倒计时一段时间后又可重复点击，具体实现如下，感兴趣的朋友可以参考下哈2013-07-07
解决ie6下png透明的问题想必前端都比较清楚，虽然有很多方法，但是我觉得用JS还是最省事的方法，不管是图片还是背景图片都OK。2013-08-08
深入理解requestAnimationFrame的动画循环
这篇文章先给大家介绍了什么是requestAnimationFrame，而后才深入讲述关于requestAnimationFrame的动画循环，文章介绍的非常详细，相信对大家学习requestAnimationFrame具有一定的参考借鉴价值，有需要的朋友下面来一起看看吧。2016-09-09
javascript中for...of和for..in循环的区别
JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了微信小程序实现验证码获取倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
最新评论