js 广告 网页漂浮

Posted 魏婴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

  

以上是关于js 广告 网页漂浮的主要内容,如果未能解决你的问题,请参考以下文章

超简单漂浮广告代码网页漂浮广告代码jQuery漂浮广告div漂浮层

怎么用css样式表实现网页上的广告的漂浮啊?

js 广告 网页漂浮

基于JQuery网页漂浮广告窗口Js详解

JS实现弹性漂浮广告代码

原生JS制作简单的漂浮广告