JavaScript实现换肤效果
博客专区 > liuvanl 的博客 > 博客详情
JavaScript实现换肤效果
liuvanl 发表于1年前
JavaScript实现换肤效果
  • 发表于 1年前
  • 阅读 88
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤效果</title>
    <!-- 开始书写css代码 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(images/0.jpg) top center;
        }
        .box {
            text-align: center;
            padding-top: 50px;
            height: 150px;
            background: rgba(255,255,255,.3);
        }
        .box img {
            cursor: pointer;
        }
    </style>
    <!-- 开始书写js代码 -->
    <script>
        window.onload = function (){
            //  获取所有的img标签
             var imgs = document.getElementsByTagName("img");
             //  使用for循环进行遍历
             for( var i = 0 ; i < imgs.length ; i++ ){
                 //  获取索引值
                 imgs[i].index = i;
                 imgs[i].onclick = function (){
                     // 打印出索引值
                     // alert(this.index);
                     document.body.style.backgroundImage = 'url(images/'+this.index+'.jpg)';
                 }
             }
        }
    </script>
</head>
<body>
    <div class="box">
        <img src="images/0.jpg" alt="" width="150">
        <img src="images/1.jpg" alt="" width="150">
        <img src="images/2.jpg" alt="" width="150">
    </div>
</body>
</html>

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 4
码字总数 635
×
liuvanl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: