简单的页面浮动窗口的制作

最新推荐文章于 2024-02-20 22:27:25 发布

maxldwy

最新推荐文章于 2024-02-20 22:27:25 发布

阅读量3.3k

点赞数 1

文章标签：页面浮动窗口悬浮窗口 html

网上找了个页面浮动窗口的制作并进行了修改。可以做到页面刷新后一直随着屏幕飘动，鼠标onmouseover时停止，离开时继续飘动，并且可以关闭

需要注意的是页头必须是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

不然就像我似得找半天问题就是不动啊。。。

下面是内容，随便加在某个html页面上就可以用了：

<!-- 页面浮动弹窗begin --><!-- 没有做鼠标经过时停止移动！onmouseover事件 -->
  	<div id="imgit" οnmοuseοver="this.id='wy'" οnmοuseοut="this.id='imgit'" style="Z-INDEX: 100; LEFT: 2px; WIDTH: 180px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;visibility: visible;" >
  		<div style="width:180px;height:20px;background-color:#00A2C9;">
  			<div style="float:left;width:150px;"> </div>
  			<div style="float:left;width:30px;height:20px;line-height:20px;background-color:#0082C1;" align="center" οnmοuseοver="this.style.backgroundColor='RED'" onMouseOut="this.style.backgroundColor='#0082C1'" οnclick="closeitt()">X</div>
  		</div>
  		<div style="width:170px;height:80px;border:solid 2px #00A2C9;padding:3px;background-color:#fff;">
	  		<a href="http://www.stctcm.com/conreg" class="newsCon" target="_blank">“中医药标准化师”培训项目第二期“标准化应用知识”培训班网上报名</a>
  		</div>
  	</div>
	<script type="text/javascript">
	var xPos = 300;
	var yPos = 200; 
	var step = 1;
	var delay = 30; 
	var height = 0;
	var Hoffset = 0;
	var Woffset = 0;
	var yon = 0;
	var xon = 0;
	var pause = true;
	var interval;
	document.getElementById('imgit').style.top = yPos;


	//关闭弹窗
	function closeitt() 
	{
		document.getElementById('wy').style.display = "none";
	}


	function changePos() 
	{ 
		width = document.body.clientWidth;
		height = document.body.clientHeight;
		Hoffset = document.getElementById('imgit').offsetHeight;
		Woffset = document.getElementById('imgit').offsetWidth;
		document.getElementById('imgit').style.left = xPos + document.body.scrollLeft;
		document.getElementById('imgit').style.top = yPos + document.body.scrollTop;
		if (yon) 
			{yPos = yPos + step;}
		else 
			{yPos = yPos - step;}
		if (yPos < 0) 
			{yon = 1;yPos = 0;}
		if (yPos >= (height - Hoffset)) 
			{yon = 0;yPos = (height - Hoffset);}
		if (xon) 
			{xPos = xPos + step;}
		else 
			{xPos = xPos - step;}
		if (xPos < 0) 
			{xon = 1;xPos = 0;}
		if (xPos >= (width - Woffset)) 
			{xon = 0;xPos = (width - Woffset);   }
	}
		
	function startit()
	 {	
		 document.getElementById('imgit').visibility = "visible";
		 interval = setInterval('changePos()', delay);
	}
	function pause_resume() 
	{
		if(pause) 
		{
			clearInterval(interval);
			pause = false;
		}
		else 
		{
			interval = setInterval('changePos()',delay);
			pause = true; 
		}
	}
	startit();
	</script>
 <!-- 页面浮动弹窗 end -->