当前位置：首页 - 正文

如何使用js漂浮广告代码,急!!!

发布网友发布时间：2022-04-23 05:21

共3个回答

懂视网时间：2022-04-23 09:42

本文主要和大家分享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>

热心网友时间：2022-04-23 06:50

你可以用alert输出yPos试试，看得到的值是什么值，有可能是没获得值。

热心网友时间：2022-04-23 08:08

img4.style.left = xPos + document.body.scrollLeft;

// img4.style.left = xPos + document.body.scrollLeft+'px';

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

如何使用js漂浮广告代码,急!!!

最新推荐

猜你喜欢

热门推荐