<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="Copyright" content="#" />
<meta name="description" content="#" />
<meta content="#" name="keywords" />
<title>11</title>
</head>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id=duilian01 style="POSITION: absoluteTOP: 100pxHEIGHT: 300pxbackground-color: #069width: 100pxleft: 6px"></div>
<div id=duilian02 style="POSITION: absoluteTOP: 100pxHEIGHT: 300pxbackground-color: #069width: 100pxleft: 896px"></div>
<script language=JavaScript src="js/scrolljs.js" type=text/javascript></script>
<table width="778" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
<tr>
<td></td>
</tr>
</table>
</BODY></HTML>
---------------------------------------下面是JS代码：命名scrolljs.js------------------------------------------
self.onError=null
currentX = currentY = 0
whichIt = null
lastScrollX = 0lastScrollY = 0
NS = (document.layers) ? 1 : 0
IE = (document.all) ? 1: 0
var tmp1= tmp2= tmp3 =0
tmp1 = document.body.clientHeight
var isArrayRightBanner = false
var has2ndScraper = false
if (typeof(duilian02.length) == "number") isArrayRightBanner = true
if (typeof(duilian01) == "object") has2ndScraper = true
function makewing()
{
tmp2 = document.body.clientHeight
if(tmp1 != tmp2){
tmp3 = tmp2 - tmp1
tmp1 = tmp2
if(tmp3<0){}
}
if(IE)
{
diffY = document.body.scrollTop
diffX = 0
}
else if(NS)
{
diffY = self.pageYOffset
diffX = self.pageXOffset
}
if(diffY != lastScrollY)
{
percent = .1 * (diffY - lastScrollY)
if(percent >0)
percent = Math.ceil(percent)
else
percent = Math.floor(percent)
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent
}
document.all.duilian02[0].style.pixelTop += percent
document.all.duilian02[1].style.pixelTop += percent
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent
}
document.all.duilian02.style.pixelTop += percent
}
if (has2ndScraper) document.all.duilian01.style.pixelTop += percent
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflash.top += percent
document.duilian02[0].top += percent
document.duilian02[1].top += percent
}
else
{
document.skyflash.top += percent
document.duilian02.top += percent
}
if (has2ndScraper) document.duilian01.top += percent
}
lastScrollY = lastScrollY + percent
}
if(diffX != lastScrollX)
{
percent = .1 * (diffX - lastScrollX)
if(percent >0)
percent = Math.ceil(percent)
else
percent = Math.floor(percent)
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent
}
document.all.duilian02[0].style.pixelLeft += percent
document.all.duilian02[1].style.pixelLeft += percent
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent
}
document.all.duilian02.style.pixelLeft += percent
}
if (has2ndScraper) document.all.duilian01.style.pixelLeft += percent
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflasy.top += percent
document.duilian02[0].top += percent
document.duilian02[1].top += percent
}
else
{
document.skyflash.top += percent
document.duilian02.top += percent
}
if (has2ndScraper) document.duilian01.top += percent
}
lastScrollY = lastScrollY + percent
}
}
if(NS || IE) action = window.setInterval("makewing()",1)
单独建一个文件夹命名js，把js文件放入文件夹内，防止路径不对出错。
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>悬浮广告</title>
</head>
<body>
<div style="height:900pxdisplay:block"></div>
<div id="AdLayer1" style='position: absolutez-index:1left:100pxborder:1px #DDD solidwidth:36pxheight:200pxbackground-color:#CCC'></div>
<div id="AdLayer2" style='position: absolutez-index:1right:100pxborder:1px #DDD solidwidth:36pxheight:200pxbackground-color:green'></div>
<script type="text/javascript">
// 页面初始化
function initEcAd() {
document.all.AdLayer1.style.posTop = 200
document.all.AdLayer1.style.visibility = 'visible'
document.all.AdLayer2.style.posTop = 200
document.all.AdLayer2.style.visibility = 'visible'
MoveLeftLayer('AdLayer1')
MoveRightLayer('AdLayer2')
}
// 移动左面的广告层
function MoveLeftLayer(layerName) {
var x = 100
var y = 100// 左侧广告距离页首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40
var y = document.body.scrollTop + y - diff
eval("document.all." + layerName + ".style.posTop = parseInt(y)")
eval("document.all." + layerName + ".style.posLeft = x")
setTimeout("MoveLeftLayer('AdLayer1')", 20)
}
// 移动右边的广告层
function MoveRightLayer(layerName) {
var x = 100
var y = 100// 右侧广告距离页首高度
var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40
var y = document.body.scrollTop + y - diff
eval("document.all." + layerName + ".style.posTop = y")
eval("document.all." + layerName + ".style.posRight = x")
setTimeout("MoveRightLayer('AdLayer2')", 20)
}
initEcAd()
</script>
</body>
</html>
<!DOCTYPE HTML><html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div style="width:100%height:150pxbackground:#eee"></div>
<div id="go" style="padding:30pxwidth:70pxborder:1px solid redbackground:#f60">1</div>
<div style="width:100%height:1500pxbackground:#eee"></div>
<div></div>
<script type="text/javascript">
$(function() {
var elm = $('#go')//通用代码，只需要修改此处id
var startPos = $(elm).offset().top
var this_left = $(elm).offset().left
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()
$(elm).css('position',((p) > startPos) ? 'fixed' : 'static')
$(elm).css('top',((p) > startPos) ? '10px' : '')
$(elm).css('left',this_left)
})
})
</script>
</body>
</html>
