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

html-css010

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

给你个思路吧

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function dis(lo)

{

for(var i=1i<=3i++)

{

if(lo==i)

document.getElementById("di"+lo).style.display="block"

else

document.getElementById("di"+i).style.display="none"

}

}

</script>

<style type="text/css">

.index_1{float:leftwidth:100pxheight:200px}

.index_2{width:100pxheight:100pxbackground-color:blue}

.index_3{width:100pxheight:100pxbackground-color:green}

.index_4{width:100pxheight:100pxbackground-color:#9900FF}

.index_5{width:200pxheight:300pxbackground-color:graydisplay:none}

.index_6{width:200pxheight:300pxbackground-color:blackdisplay:none}

.index_7{width:200pxheight:300pxbackground-color:yellowdisplay:none}

.index_8{float:leftwidth:200pxheight:300px}

</style>

</head>

<body>

<div class="index_1">

<div class="index_2" onmousemove="dis(1)"></div>

<div class="index_3" onmousemove="dis(2)"></div>

<div class="index_4" onmousemove="dis(3)"></div>

</div>

<div class="index_8">

<div id="di1" class="index_5"></div>

<div id="di2" class="index_6"></div>

<div id="di3" class="index_7"></div>

</div>

</body>

</html>