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程序设计有所帮助。

时间: 2015-04-08

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

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简单实现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

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

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

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 DIV滚动条随机位置的设置技巧

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

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;

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

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

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,jquery滚动/跳转页面到指定位置的实现思路

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

layui问题之自动滚动二级iframe页面到指定位置的方法

一.问题 前提:用的layui框架 目标:改变iframe页面滚动条位置 问题:没有麻溜溜的滚.. 二.经过 刚开始,以为只要滚动iframe里面的元素就行了,页面所有元素都在section里面,就通过section使滚动条滚动 $('section.layui-larry-box').scrollTop(300); 可想而知,不行 然后,又试了div啥的 最后直接试了包含这个页面的iframe标签,让iframe滚动 $(this).children('iframe').scrollTop(3

不用锚点也可以平滑滚动到页面的指定位置实现代码

不用锚点也可以平滑滚动到页面的指定位置 复制代码 代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=

Angular 利用路由跳转到指定页面的指定位置方法

之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,

使用jQuery加载html页面到指定的div实现方法

一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里. 比如:加载a.html里面的<div id="row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div> 用jquery ajax 可以实现 假设 a.html 和b.html在同一目录 b.html <script >

基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)

比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par

JS在一定时间内跳转页面及各种刷新页面的实现方法

1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu

js实现浏览器倒计时跳转页面效果

本文实例为大家分享了js浏览器倒计时跳转页面效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> </head> <body> <H4>

jquery 仿锚点跳转到页面指定位置的实例

js 仿锚点跳转到页面指定位置,用的是 offset() 方法 $(document).ready(function(){ var target_top = $("#qa5").offset().top; //$("html,body").animate({scrollTop: target_top}, 1000); //带滑动效果的跳转 $("html,body").scrollTop(target_top); }); jQuery: offs

jQuery实现平滑滚动页面到指定锚点链接的方法

本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S