• 制作加入购物车动画效果


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <style>
    * {
    padding: 0px;
    margin: 0px;
    font-family: "微软雅黑";
    }

    .goodsItem{
    280px;
    height: 400px;
    float: left;
    border: 1px solid #ccc;
    margin:5px;
    }
    #goods{
    910px;
    }
    .goditem{
    list-style: none;
    }
    .godpic img{
    display: block;
    250px;
    height: 250px;
    margin:0px auto;
    }
    .godprice,.godinfo,.godadd{
    display: block;
    220px;
    margin:0px auto;
    text-align: center;
    }
    .godprice{
    font-size: 20px;
    color: #f00;
    }
    .godinfo{
    text-align: center;
    font-size: 14px;
    margin: 10px 0px;

    }
    .godadd a{
    display: block;
    150px;
    height: 36px;
    background-color: #fd6a01;
    border-radius: 10px;
    margin: 0px auto;
    text-decoration: none;
    color:#fff;
    line-height: 36px;
    }
    #godcar{
    position: fixed;
    right: 0px;
    top:40%;
    72px;
    height: 64px;
    }
    #godcar .dnum{
    24px;
    height: 24px;
    border-radius: 12px;
    background-color: #f00;
    text-align: center;
    line-height: 24px;
    position: absolute;
    font-size: 12px;
    top:0px;
    }
    .godadd .bg {
    background-color: #808080;
    }

    </style>

    </head>
    <body>
    <div id="goods">
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/whellz.jpg"></li>
    <li class="godprice">¥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的,这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/teapotz.jpg"></li>
    <li class="godprice">¥56.00</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/rosez.jpg"></li>
    <li class="godprice">¥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/pooltablez.jpg"></li>
    <li class="godprice">¥25.00</li>
    <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的,这部诗集最早由郑振铎先生译介到中国。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/Grassz.jpg"></li>
    <li class="godprice">¥56</li>
    <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    <div class="goodsItem">
    <ul class="goditem">
    <li class="godpic"><img src="images/shops/lightz.jpg"></li>
    <li class="godprice">¥37.00</li>
    <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
    <li class="godadd"><a href="javascript:;">加入购物车</a></li>
    </ul>
    </div>
    </div>

    <div id="godcar">
    <div class="dnum">0</div>
    <div class="dcar">
    <img src="images/shop3.png">
    </div>
    </div>

    </body>

    <script>

    //首先需要获取到商品的图片,然后将获取到的图片复制一份;


    var i = 0;
    var inum = 0;
    if(localStorage.getItem("inum")!==null){
    inum = localStorage.getItem("inum");
    }
    $(".dnum").text(inum);

    $(".godadd").click(function(){
    if (!$(this).find("a").hasClass("bg")) {
    i++;
    $(this).find("a").addClass("bg");

    // 首先需要获取到商品的图片,然后将获取到的图片复制一份;
    var img = $(this).parent().find(".godpic").find("img");
    var cimg = img.clone();
    // 得到商品图片的top和left值,购物车的top和left值,这样才可以通过animate函数实现移动
    var imgtop = img.offset().top;
    var imgleft = img.offset().left;
    var cartop = $("#godcar").offset().top;
    var carleft = $("#godcar").offset().left;

    // 编写animate函数,实现具体的效果;
    cimg.appendTo($("body")).css({
    "position": "absolute",
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
    }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
    }, 1000, function () {
    cimg.remove();//图片消失
    $(".dnum").text(i);//购物车数量变化
    localStorage.setItem("inum", i);
    });
    }

    });









    </script>
    </html>
  • 相关阅读:
    仿windows选项卡效果拾零(收藏)
    把一个字符串分开存入一个临时表中
    DOM的基本方法
    如何判断iframe加载完毕(原创)
    javascript中showModalDialog和showModelessDialog的使用(转)
    一个sql子查询作为过滤条件的例子(原创)
    关闭窗口,弹出对话框
    设置C#程序在Windows 7 Vista下以管理员权限运行(转)
    SQL SERVER 6 视图与索引
    SQL SERVER 各类触发器的完整语法及参数说明(拓展)
  • 原文地址:https://www.cnblogs.com/yaomengli/p/7472973.html
Copyright © 2020-2023  润新知