<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>广告</title></head><script type="text/javascript">
//广告上下 浮动var y=20; //浮动广告初始位置var yin=true; //xin为真，则向右运动，否则向左运动；yin为真，则向下运动，否则向上运动var step=4; //移动的距离var delay=500; //移动的时间间隔var t;//取值便于悬停function move(){var T=0; //T上边界var B=document.getElementById("one").offsetHeight+document.getElementById("two").offsetHeight; //下边界document.getElementById("one").style.top=y; //左div层移动，距离上边界的距离document.getElementById("four").style.top=y;//右div层移动，距离上边界的距离y=y+step*(yin?1:-1);//判断上还是下if(y<T){yin=true;y=T;}//判断是否到达上边界if(y>B){yin=false;y=B;}//判断是否到达下边界t=setTimeout("move()",delay);//隔多长时间调用一次，取值便于悬停}//悬停function stop(){clearTimeout(t);//清除timeout事件}//左边收起广告var i=0;function clos(){if(i%2==0){document.getElementById("two").style.display="none";//隐藏divdocument.getElementById("three").innerHTML="展开";}else{document.getElementById("two").style.display="";document.getElementById("three").innerHTML="收起";}i++;}//右边广告的关闭//var j=0;function clos2(){//if(j%2==0){document.getElementById("four").style.display="none";//document.getElementById("five").innerHTML="展开";//}else{//document.getElementById("six").style.display="";//document.getElementById("five").innerHTML="收起";//}j++;}</script><style>#one{background-color:green;width:150px;height:20px;text-align:center;position:absolute}#two{width:150px;height:400px}
#four{background-color:green;width:150px;text-align:center;position:absolute;right:0px}#five{width:150px;height:400px}</style><%--打开页面直接加载move --%><body onLoad="move()"><%--左边div 添加鼠标移出移入事件--%><div id="one" onMouseOver="stop()" onMouseOut="move()" ><a id="three" οnclick=clos()>收起</a><div id="two" ><a href="https://www.baidu.com/s?ie=utf-8&wd=淘宝" target="_blank"><img src="tuu12.jpg" border="0"></imag></a></div></div>
<%--右边div --%><div id="four" onMouseOver="stop()" onMouseOut="move()"><a id="five" οnclick=clos2()>关闭</a><div id="six"><a href="https://www.baidu.com/s?ie=utf-8&wd=淘宝" target="_blank"><img src="tuu12.jpg" border="0"></imag></a></div></div>
</body></html>
转载于:https://www.cnblogs.com/yaer/p/5282508.html
相关资源：jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.