JS实现网站悬浮广告的代码

来源：动视网责编：小采时间：2020-11-27 19:57:40

JS实现网站悬浮广告的代码

JS实现网站悬浮广告的代码:本文主要和大家分享JS实现网站悬浮广告的代码，大家可以先看一下效果图，希望能帮助到大家。如图黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止<!doctype html> <html> <he> <meta charset=&q

推荐度：

点击下载本文 文档为doc格式

导读JS实现网站悬浮广告的代码:本文主要和大家分享JS实现网站悬浮广告的代码，大家可以先看一下效果图，希望能帮助到大家。如图黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止<!doctype html> <html> <he> <meta charset=&q

本文主要和大家分享JS实现网站悬浮广告的代码，大家可以先看一下效果图，希望能帮助到大家。

如图

黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止

<!doctype html>
<html>
<he>
	<meta charset="utf-8">
	<title>广告</title>
	<style type="text/css">
	*{
	pding:0px;
	margin:0px;
	}
	#ad{
	position:absolute;
	left:0px;
	top:0px;
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:black;
	background-color:orange;
	border-rius: 2%;
	}
	</style>
</he>
<body>
	<p id="ad">广告位招商</p>
</body>
<script type="text/javascript">
	//获取img
	ad=document.getElementById("ad");
	//初始化横坐标
	x=0;
	//设置纵坐标
	y=0;
	//设置加速度
	yv=10;
	xv=10;
	function fun(){
	//范围
	//左右
	if(x<0||x>window.innerWidth-ad.offsetWidth){
	xv=-xv;
	}
	//上下
	if(y<0||y>window.innerHeight-ad.offsetHeight){
	yv=-yv;
	}
	x+=xv;
	y+=yv;
	//获取到的x值赋值给ad的left
	ad.style.left=x+"px";
	//获取到的y值赋值给ad的top
	ad.style.top=y+"px";
	}
	mytime=setInterval(fun,100);

	//给ad绑定鼠标移入事件
	ad.onmouseover=function(){
	//清除定时器
	clearInterval(mytime);
	}
	//鼠标移出
	ad.onmouseout=function(){
	mytime=setInterval(fun,100);
	}
</script>
</html>

JS实现网站悬浮广告的代码

推荐度：

点击下载本文 文档为doc格式

标签：网站网页实现

热门焦点

JS实现网站悬浮广告的代码

JS实现网站悬浮广告的代码

JS实现网站悬浮广告的代码

最新推荐

猜你喜欢

热门推荐