您的位置：首页 > Web前端 > JavaScript

js上下浮动广告

2016-03-16 10:42 447 查看

<%@ 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";//隐藏div
document.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" onclick=clos()>收起</a>
<div id="two" ><a href="https://www.baidu.com/s?ie=utf-8&wd=%E6%B7%98%E5%AE%9D" target="_blank"><img src="tuu12.jpg" border="0"></imag></a></div>
</div>

<%--右边div --%>
<div id="four" onMouseOver="stop()" onMouseOut="move()"><a id="five" onclick=clos2()>关闭</a>
<div id="six"><a href="https://www.baidu.com/s?ie=utf-8&wd=%E6%B7%98%E5%AE%9D" target="_blank"><img src="tuu12.jpg" border="0"></imag></a>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航