Jquery换肤

最新推荐文章于 2018-12-11 13:50:36 发布

yy211zhu

最新推荐文章于 2018-12-11 13:50:36 发布

阅读量2.5k

点赞数 1

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/yy211zhu/article/details/51366827

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是通过jquery，点击更换背景按钮来触发事件，从而改变body背景图片，先看下面的源码啊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
    <style type="text/css">

    *{margin: 0; margin: 0; border: 0;}
    html{width: 100%; height: 100%;}
    body{width: 100%; height: 100%; background-image: url(1.jpg); 

    overflow: hidden;
    font-family: "微软雅黑","'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
    }

    .content{color: white; background-color: #000; opacity: 0.3;}
    .content h1{font-size: 60px; text-align: center;}
    .content p{text-align: right;}
    .content p input{height: 30px; background-color: orange;  }
    .footer{position: relative;
    width: 1200px;
    height:auto;
    margin: 0 auto;
    margin-top: 50px;
    }
    .f-content{
      color: white;
      width: 1200px;
      margin: 0 auto;
      height:auto;
      font-size: 30px;
     bottom: 0;

    }
    </style>
    <script>
           $(document).ready(function(){

             var imgcount=4;//背景图片数量
             var imgNow=0;//显示的背景图片位置
             $("#bgbtn").click(function(){
                imgNow=(imgNow+1)%imgcount;//数值在0-3之间循环
                bgshow(imgNow) ;
             })

           })
           function bgshow(imgNow){
               var imgArry =new Array("url(1.jpg)","url(2.jpg)","url(3.jpg)","url(4.jpg)");//所需的图片url地址
                 var b=$("body");      
                 var imgsr=imgArry[imgNow];
                 b.css("background-image",imgsr);
           }

    </script>
</head>
<body>
 <div class="content">
   <h1>周杰伦-晴天</h1>
   <p><input type="button" id="bgbtn" value="点击更换背景" onclick="test()"/><p>
 </div>
 <div class="footer">
   <div class="f-content">
     <h3>晴天</h3>
     <p>从出生那年就飘着</p>
     <p>童年的荡秋千</p>
     <p>随记忆一直晃到现在</p>
     <p>rui sou sou xi dou xi la</p>
     <p>吹着前奏望着天空...<input type="button" value="更多" onclick="bgshow(2)" style="background-color:white; opacity:0.2;"/></p>

   </div>
 </div>
</body>
</html>