jquery制作网页标签的行为

来源：互联网发布：java web电子书下载编辑：程序博客网时间：2024/06/07 05:15
<!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>
0 0