jQuery实现中间广告位效果

学习资料

http://v.apelearn.com/student.php

要求

展现广告的位置固定在页面的右侧中间位置；

知识点

1.IE6不兼容position：fixed;的解决方案

position: fixed;

_position: absolute;/*IE6不兼容fixed*/

2. 解决抖动的方案

body {

/*解决抖动：背景固定*/

background-image: url();

background-attachment: fixed;

}

3.屏幕可视区域的获取

//javascript

document.documentElement.clientHeight

document.documentElement.clientWidth

//jQuery

$(window).height();

S(window).width();

4.元素实际尺寸的获取

//JavaScript

obj.offsetHeight

obj.offsetWidth

//jQuery

outerHeight()

outerWidth()

5.浏览器版本检测

window.navigator.userAgent.toLowerCase().indexOf('IE 6.0')

6.滚动高度的获取

document.documentElement.clientHeight || document.body.scrollTop;

7.滚动条滚动事件

scroll

8.其他

获取览器显示区域的高度 ： $(window).height();

获取浏览器显示区域的宽度 ：$(window).width();

获取页面的文档高度 ：$(document).height();

获取页面的文档宽度 ：$(document).width();

获取滚动条到顶部的垂直高度 ：$(document).scrollTop();

获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();

实现思路

1.获取广告位容器的实际高度；

2.获取屏幕可视区的高度；

3.计算居中的位置；

4.兼容性解决；

Demo代码

HTML

CSS

body{height:3000px;}

.box{

/*解决抖动的问题*/

position:fixed;_position:absolute;/*IE6不兼容fixed*/right:0;top:0;width:200px;height:200px;line-height:200px;background-color:orangered;color:#fff;text-align:center;}

body{

/*解决抖动：背景固定*/

background-image:url();background-attachment:fixed;}

JS

$(function() {

/* 盒子的实际尺寸：本身高度+上下边框+上下的内边距 */

variBoxH =$('.box').outerHeight();

/* 获取可视区的高度 */

variClientHeight =$(window).height();

/* 居中定位： (屏幕可视区域的高度 - 盒子本身的高度)/2

* 即是：(可视区域 - 元素尺寸)/2*/

variPosition = (iClientHeight - iBoxH)/2;

$('.box').css('top',iPosition);

$(window).scroll(function() {

if(window.navigator.userAgent.toLowerCase().indexOf('IE 6.0') !== -1) {

variScrollTop =$(document).scrollTop();

alert(iScrollTop);

$('.box').css('top',(iPosition + iScrollTop));

}

});

});

效果

中间广告位效果