jquery制作网页标签的行为-优快云博客

本文介绍了一个使用HTML、CSS及JavaScript实现的手机界面动画效果，包括背景图片、透明度变化以及点击按钮触发的旋转动画，并通过jQuery实现了音乐的播放控制。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv = "Content-Type" content="text/html ; charset =UTF-8"/>
  <title> new document </title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=100%;initial-scal=1.0;maximum-scale=1.0;user-scalable=0;"/>
  <!--css/js-->
  <style type="text/css">
  	body{
		background:url(2.jpg) no-repeat;
		background-size:cover;
	}
	.phone{
		width:200px;height:400px;
		margin:80px auto;
		position:relative;
	}
	.phone .p_ph{
		height:400px;
		width:200px;
		background:url(4.jpg) no-repeat;
		background-size:100% 100%;
	}
	.phone .p_ph .pic{
		top:33px;
		left:5px;
		height:340px;
		width:190px;
		background:#093;
		background-size:100% 100%;
		position:absolute;
	}
	.phone .link{
		width:40px;
		height:40px;
		display:block;	
		background:url(6.jpg) no-repeat;
		background-size:cover;
		position:absolute;
		top:33px;
		left:5px;
	}
	/*定义图像旋转动画帧*/
	@-webkit-keyframes arr{
		from{
			-webkit-transform:rotate(0deg);
		}to{
			-webkit-transform:rotate(360deg);
		}
	}
	/*调用帧*/
	.rotate{
		-webkit-animation: arr 2.2s linear infinite;
		animation:arr 2.2s linear infinite;
	}
	/*响应式布局*/
	@media screen and (max-width:800px){
		.phone .p_ph{display:none;}
		.phone{margin:0;}
	}
	
  </style>
 </head>

 <body>
 <!--phone start-->
	<div class="phone">
    	<div class="p_ph">
        	<div class="pic"></div>
    	</div>
        <a href="#" class="link"></a>
	</div>
	<!--end phone-->
    <!--引入官方类库-->
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <script type="text/javascript">
    	$(function(){
			var au = document.createElement("audio");
			au.src="music/1.mp3";
			
			//点击旋转
			$(".link").click(function(){
				if(au.paused){
					au.play();
				} else{
					au.pause();
				}
				$(this).toggleClass("rotate");
			});
		});
    </script>
 </body>
</html>