网页实现飘窗

最新推荐文章于 2024-01-18 17:04:29 发布

yjm2017

最新推荐文章于 2024-01-18 17:04:29 发布

阅读量708

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sxl2017/article/details/131536383

版权

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页飘窗</title>
<script type="text/javascript" src="<%=path %>/skin/jquery.js"></script>
<style type="text/css">
#roll {
    height: 200px;
    position: fixed; /*fixed实现绝对定位*/
    cursor:pointer;
}

#roll img{
    height: 100%;
    width: auto;
}
.guanbi{width:60px;height:30px;position: absolute;right:-25px;top:-25px;}
</style>
</head>
<body>

<!--飘窗-->
<div id="roll">
<div class="guanbi" id="guanbi" onclick="gb()">关闭</div>
    <img src="./skin/img/pc.jpg">
</div>

</body>
<script type="text/javascript">

function gb(){
	document.getElementById("roll").style.display = 'none';
}

var ggRoll={                                     //创建对象直接量
		  roll:document.getElementById("roll"),          //获取id属性为roll的对象
		  speed:20,                                      //飘动速度，即为定时器函数多长时间执行一次
		  statusX:1,                                     //规定每执行一次函数，left属性值变化的幅度
		  statusY:1,                                     //规定每执行一次函数，top属性值变化的幅度
		  x:100,                                         //规定初始状态下left属性的值
		  y:300,                                         //规定初始状态下top属性的值
		  //差值用来测算left属性值的极限
		  winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth, 
		  //差值用来测算top属性值的极限
		  winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight, 
		  //声明函数
		  Go: function () {                                                               
		       //设置div的left属性值
		       this.roll.style.left = this.x + 'px';                                      
		       //设置div的top属性值
		       this.roll.style.top = this.y + 'px';                                       
		       //如果statusX=1则每次减少1px,否则减少1px
		       this.x = this.x + (this.statusX ? -1 : 1)                                  
		       //如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
		       if (this.x < 0) { this.statusX = 0 }                                       
		       //如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
		       if (this.x > this.winW) { this.statusX = 1 }                               
		 
		       this.y = this.y + (this.statusY ? -1 : 1)
		       if (this.y < 0) { this.statusY = 0 }
		       if (this.y > this.winH) { this.statusY = 1 }
		 
		     }
		  };
		 
		var interval=setInterval("ggRoll.Go()",ggRoll.speed);
		
		ggRoll.roll.onmouseenter = function(){clearInterval(interval)};  //onmouseover属性：鼠标移动到元素上时触发
		                    
		ggRoll.roll.onmouseleave =function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout属性:鼠标离开元素时触发

</script>
</html>