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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js中的如何定位固定层的位置

    js中的如何定位固定层的位置

    需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0:如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 复制代码 代码如下: var top=document.documentEl

  • javascript 精确获取页面元素的位置

    javascript 精确获取页面元素的位置

    复制代码 代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop; } 貌

  • js，jquery滚动/跳转页面到指定位置的实现思路

    要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

  • js DIV滚动条随机位置的设置技巧

    style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动

  • javascript 获取页面的高度及滚动条的位置的代码

    复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • js 固定悬浮效果实现思路代码

    复制代码 代码如下: <script type="text/javascript"> (function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动区域 var ele_offset_top = ele_fix.offset().top; //浮动区域高度 $(window).scroll(function(){ var scro_top

  • JS简单实现DIV相对于浏览器固定位置不变的方法

    本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Anchor Properties</title> <meta http-equiv="Content-Type" content=&q

  • js固定DIV高度,超出部分自动添加滚动条的简单方法

    复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;

随机推荐