js 悬浮窗

最新推荐文章于 2023-06-20 15:19:02 发布

落叶翩翩

最新推荐文章于 2023-06-20 15:19:02 发布

阅读量2.2k

点赞数

分类专栏： web前端文章标签： html js

本文链接：https://blog.csdn.net/bolg_hero/article/details/17042023

版权

web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
	<meta charset="UTF-8">
	<title>js 悬浮窗</title>
	<script type="text/javascript">
		var container,win,ctr_width,ctr_height,ctr_left,ctr_top;
		var win_left,win_top,win_width,win_height,x_offset=5,y_offset=5;
		function log(msg){
			console.log(msg);			
		}
		function moveWin(){	
		    win_left=parseInt(win.style.left); 		
		    win_top=parseInt(win.style.top);
			if(win_left<ctr_left||win_left>(ctr_left+ctr_width-win_width)){
				x_offset=-1*x_offset;
			}
			if(win_top<ctr_top||win_top>(ctr_top+ctr_height-win_height)){
				y_offset=-1*y_offset;
			}			
			win.style.left=(win_left+x_offset)+"px";
			win.style.top=(win_top+y_offset)+"px";	
			setTimeout('moveWin()',100);
		}
		function init(win_t,con_t){
			win=win_t;
			container=con_t;
			ctr_width=container.clientWidth;		
			ctr_height=container.clientHeight;			
			win_width=win.clientWidth;
			win_height=win.clientHeight;	
			ctr_left=container.offsetLeft
			ctr_top=container.offsetTop;			
			win.style.left=ctr_left+"px";
			win.style.top=ctr_top+"px";
		}
		window.οnlοad=function(){
			init(document.getElementById("win"),document.getElementById("container"));
			moveWin();
		}		
	</script>	
	<style>
		.win{
			position:absolute;
			width: 100px;
			height: 100px;
		    left:0;
		    top:0;
		    border:1px solid red;
		    width:300px;
		    height:250px;
		    background-color: #222222;	
		}
		#container{
			margin: 0 auto; 
			background-color: red;		
			width: 600px;	
			height: 1000px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="win" class="win">
			win

		</div>
	</div>

</body>
</html>

落叶翩翩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 悬浮窗

js 悬浮窗 var container,win,ctr_width,ctr_height,ctr_left,ctr_top; var win_left,win_top,win_width,win_height,x_offset=5,y_offset=5; function log(msg){ console.log(msg); } function moveW
复制链接

扫一扫