模仿网页广告在页面上滚动出现

最新推荐文章于 2019-09-09 14:57:06 发布

FYANGFEI

最新推荐文章于 2019-09-09 14:57:06 发布

阅读量447

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/FYANGFEI/article/details/81191267

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

js,jquery写的

1.效果图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<style type="text/css" media="screen">
		.content{
			width: 600px;
			height: 600px;
			margin: 0 auto;
			border: 4px solid green;

		}
		.box{
			width: 100px;
			height: 100px;
			border: 2px solid black;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="box"><h1>烦人的广告！</h1></div>
	</div>
	<script type="text/javascript">
			// $('.box').parent().width()
		$(function(){
			var Timer;
			var x=0;
			var y=0;
		
		var timer= setInterval(fn,10);

		function fn(){
		
			x++;
			y++;
	$('.box').css({'position':'relative','left':''+y+'px','top':''+x+'px'});
			if(y>$('.box').parent().width()-$('.box').width()){
				y=0;
				x=0;
			}
			if(x>$('.box').parent().height()-$('.box').height()){
				x=0;
				y=0;

                
			}
			
		}

		$('.box').mouseenter(function() {
				 clearTimeout(timer); 
				  clearTimeout(Timer); 
			});
		$('.box').mouseleave(function() {
				Timer = setInterval(fn,10);
			}); 	 
			  
			
		})
	</script>
</body>
</html>