(难度:13%)动态背景的实现

最新推荐文章于 2023-07-05 11:34:45 发布

木木钧

最新推荐文章于 2023-07-05 11:34:45 发布

阅读量620

点赞数

本文链接：https://blog.csdn.net/lj654548718/article/details/28090765

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

看起来好炫酷, 其实抓住了要点, 其实现实起来还是挺简单的. 而且, 关键是浏览器兼容性还不错 ^_^

<!DOCTYPE html>
<!-- 又是上面这句坑爹的话搞到不能对齐 -->
<html>
<head>
	<meta charset='utf-8'>
	<!-- http://code.jquery.com/jquery-2.1.1.min.js
	这个版本的jquery与ie8不兼容 -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

	<style>
		body{
			margin:30px auto;
			width: 900px;
		}
		h2{
			/*这种字体和颜色比较可爱一点*/
			font-family: Lucida Sans Unicode, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
			color: #396A88;
		}
		.container1{
			margin:30px auto;
			background: url('./images/gradient.jpg');
			height: 358px;
			width: 899px;

		}
		.container1 .head_title{
			padding: 150px 0px 0px 0px;
			background: url('./images/overlay.png');
			font-size: 120px;
			color: white;
			line-height: 100px;
			text-align: right;
			/*两个一起加才行*/
			font-weight: bold;
			font-family: Arial, Helvetica, Verdana, sans-serif;
		}
		.container2{
			background: url('./images/gradient.jpg');
			width: 640px;
			margin:30px auto;
		}
		.container2 .head_title{
			background: url('./images/overlay.png') 50% 10px;
		}
		.container2 img{
		}
	</style>
</head>
<body>
	<h2>Example 1(动态背景, 鼠标控制移动方向)</h2>
	<div class="container1">
		<div class='head_title' >
			Hello<br>World!
		</div>
	</div>
	<br/>
	<br/>
	<h2>Example 2(动态字体)</h2>
	<div class='container2'>
		<div class='head_title' >
			<img src='./images/example2.png'>
		</div>
	</div>
</body>
</html>
<script>
	//h1和show1()的定义必须放在$(function())的外面
	//不然jquery初始化完了, h1和show1就会被删掉了,就没效果了
	var h1=Math.floor(Math.random()*2000);
	var dir1=1;
	var $con1=$(".container1");
	function show1(){
		h1+=4*dir1;
		h1%=2000;
		$con1.css("background-position","50% "+h1+"px");
	}
	var h2=Math.floor(Math.random()*2000);
	var $con2=$(".container2");
	function show2(){
		h2+=21;
		h2%=2000;
		$con2.css("background-position","50% "+h2+"px");
	}
	$(function(){
		$con1.css("background-position","50% "+h1+"px");
		setInterval("show1()", 50);
		$con2.css("background-position","50% "+h2+"px");
		setInterval("show2()", 50);
		$con1.mouseover(function(){
			dir1=-1;
		}).mouseleave(function(){
			dir1=1;
		})
	});
</script>

效果如下(动态的效果在图片显示不出来...):