Nolanamy
2017-03-27 01:27
采纳率: 15.8%
浏览 1.4k

点击图片切换成对应的body背景图有点问题,求教,谢谢

做了一个点击图片切换成对应的body背景图,而且在css中加了动画的渐变,但是第一次点击有动画,第二次没有,第三次有,第四次没有这样子,是为什么,谢谢
图片说明
图片说明
图片说明

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 普通先生 2017-03-27 01:44

    可以写一个addClass方法,定义一个class把你需要的效果写到里面。

    打赏 评论
  • 罗忠浩 2017-03-27 03:23

    把每一个函数中都加入这条语句
    $("body").css("transition","all 1.5s");
    整体感觉看不懂你的代码,最好把源代码原样截图,你这样截图不是很好。ssxs

    打赏 评论
  • 萧逸才 2017-03-28 09:55
     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
        <style>
            .icon_1 {
                transition: all 1.5s;
                background-image: url('icon_1.png');;
            }
    
            .icon_2 {
                transition: all 1.5s;
                background-image: url('icon_2.png');;
            }
    
            img {
                border: 2px solid black;
            }
        </style>
    </head>
    <body class="icon_1">
    <div id="box">
        <img src="icon_1.png" onclick="p1();"/>
        <img src="icon_2.png" onclick="p2();"/>
    </div>
    </body>
    <script>
        function p1() {
            console.log("p1");
            $("body").removeClass().addClass("icon_1");
        }
    
        function p2() {
            console.log("p2");
            $("body").removeClass().addClass("icon_2");
        }
    </script>
    </html>
    
    打赏 评论
  • 好多米阳光 2017-04-01 03:40

    方法获取背景图的地址,赋值给body(为防止刷新页面地址丢失,可将获取的src地址存放到storage里面);

    getUrl(){
    localStorage.setItem("key":$("").attr("src));
    $(body).css({"background":localStorage.getItem(key)});
    }

    打赏 评论

相关推荐 更多相似问题