CSS+JS上下浮动左右对联广告特效

html-css09

CSS+JS上下浮动左右对联广告特效,第1张

给你个思路吧

左右对联浮动只用css就可以实现了

设置两个div，设置position属性为fixed

左侧浮动的div，left为0，top设置一定的值

右侧浮动的div，right为0，top设置一定的值

<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>