其他分享
首页 > 其他分享> > js 广告 网页漂浮

js 广告 网页漂浮

作者:互联网

<style type="text/css">
	*{margin: 0; padding: 0;}
	#f {position: absolute;}
	#btn{position: absolute;left: 186px;}
</style>

<body style="height: 2000px;">
	<div id="f">
		<img src="img/banner.jpg"  width="200px"height="100px"/>
		<button id="btn">×</button>
	</div>
	
	
</body>
<script type="text/javascript">
	var w=document.body.clientWidth-200;//自身宽度减去图片本身的宽度
	var h=document.documentElement.clientHeight-100;//自身高度减去图片本身的高度
	var x=0,y=0;//原点
	var xs=2,ys=1;//移动的坐标(2,1)
	var d=document.getElementById("f");
	var timer;
	//定义移动函数,实现图片移动
	function fly(){
		if (x<0 || x>w) xs=-xs;
		if (y<0 || y>h) ys=-ys;
		x=x+xs;
		y=y+ys;
		d.style.left=x+'px';
		d.style.top=y+'px';
		timer= setTimeout("fly()",10);
	}
	 fly();
	
	
	//叉号按钮
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		d.style.display="none";
	}
	
	//鼠标放上图片
	d.onmouseover=function(){
		clearTimeout(timer);
	}
	//鼠标离开图片
	d.onmouseout=function(){
		fly();
	}
	
</script>

  

标签:function,document,网页,漂浮,js,var,xs,ys,btn
来源: https://www.cnblogs.com/aomeng/p/11736181.html