前台页面

<link href="MyCar.css" rel="stylesheet" />

    <script src="../jquery.js"></script>

    <script>

        $(function () {

            $(".Car").click(function () {

                var path = $(".dh").attr("src"); //拿到图片路径

                var top = $(".dh").offset().top; //得到原图的到上面的距离    offset()  偏移量

                var left = $(".dh").offset().left;  //到左边距离

                var im = '<img class="mydh" src="' + path + '" style="top:' + top + 'px;left:' + left + 'px" />';//得到新的图片 这个位置就是原图位子

                if (!$(".mydh").is(":animated")) {  //如果没有做动画

                    $(".M_Img").append(im);  //在div为M_Img里面添加一张图片把原图覆盖掉

                    $(".mydh").animate({ "top": "10px", "left": "1000px", "height": "", "width": "" }, , function () {

                        $(".CarNum").text("");

                    });//新图做动画，原图不变

                }

            });

        });

    </script>

</head>

<body>

    <header>

        <span>登陆</span><span>注册</span><span>购物车<span class="CarNum"></span></span><span>客服服务</span><span>投诉建议</span><span>联系我们</span>

    </header>

    <div class="Main">

        <h3>游戏动漫>>>海贼王>>>路飞</h3>

        <div class="M_Img">

            <img class="dh" src="img/01.jpg" style="width:200px; height:240px;" />

        </div>

        <div class="M_AddCar">

            <p>这是要成为海贼王的男人</p>

            <p>价格：￥<span style="color:red;"></span></p>

            <p>数量：<span class="mynum"></span></p>

            <p><span class="Car">加入购物车</span><span class="gm">立即购买</span></p>

        </div>

    </div>

</body>

</html>

样式表

*{

    margin:;

    padding:;

}

header {

    text-align:right;

     background-color:rgba(, , , 0.70);

     padding:5px 20px;

}

header  span{

    margin-left:10px;

}

.CarNum {

    margin:;

    color:red;

}

.M_Img{

    margin-top:80px;

    padding-left:30px;

    width:300px;

    height:280px;

    float:left;

}

.M_AddCar {

    margin-top: 80px;

    padding-left: 30px;

    width: 500px;

    height: 280px;

}

 .M_AddCar p {

        margin-top: 30px;

    }

.Car, .gm {

    padding: 10px;

    background-color: rgba(, , , 0.79);

    margin-left: 10px;

    border-radius: 10px;   /*圆角*/

    cursor: pointer;  /*光标改为手*/

}

.mydh {

    width: 200px;

    height: 240px;

    opacity: .;

    z-index: ;  /*两张图片 把这样置于顶层*/

    position: absolute;  /*把新加的图片给个绝对定位，好做动画效果*/

}

jQuery 动画之 添加商品到购物车的更多相关文章

  1. 添加商品到购物车add_to_cart.php（学生笔记）

    <?php session_start();//启动session $goods_id = $_POST['goods_id'];//获取商品id $number = $_POST['num'] ...

  2. AI学习吧-购物车-添加商品接口

    create接口流程 需求:向购物车添加商品 流程:写shopping_cart路由--->写ShoppingCart视图函数--->使用Authuser校验用户是否登录--->首先 ...

  3. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  4. Flutter实战视频-移动电商-51.购物车_Provide中添加商品

    51.购物车_Provide中添加商品 新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有 ...

  5. Unit02： jQuery事件处理 、 jQuery动画

    Unit02: jQuery事件处理 . jQuery动画 jQuery实现购物车案例 <!DOCTYPE html> <html> <head> <titl ...

  6. jQuery基于json与cookie实现购物车的方法

    /** * 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数 */ function AddToShoppingCar(id, num, type) { var _num = ...

  7. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  8. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  9. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

随机推荐

  1. Redis安全

    安全 执行在可信环境 Redis的安全设计是在"Redis执行在可信环境"这个前提下做出的.在生产环境执行时不能同意外界直接连接到Redisserver上.而应该通过应用程序进行中 ...

  2. IOS－沙盒机制（一 简述）

    一 IOS沙盒机制       出于安全的目的,应用程序仅仅能将自己的数据和偏好设置写入到几个特定的位置上.当应用程序被安装到设备上时,系统会为其创建一个家文件夹,这个家文件夹就是应用程序的沙盒.所以 ...

  3. gcc/g++/make 编译信息带颜色输出

    假设编译一个项目错误警告太多.很不好找,所以很希望输出信息能够带有颜色. 但是 gcc 4.9.0 之前的版本号并不支持,非常多情况下是不能替换编译器的,比方使用交叉编译器, 也能够使用 colorg ...

  4. TBB入门

    获取TBB TBB的官方网站在http://threadingbuildingblocks.org/,可以在它的Downloads页面里找到Commercial Aligned Release,最新版 ...

  5. html的特质语义:微格式及其他(重点介绍其中两种)

    今天再次翻开html的书本, 感觉过了个周末似乎生疏了许多, 虽然我是刚接触html的, 但是对于他还是抱有极其大的兴趣的, 所以不爱看书的我, 也开始一遍遍的翻阅着书本, 寻找解决问题的方法, 下面 ...

  6. 使用android-resource-remover删除项目中无用的资源，减少包的大小

    写这篇文章的原因是,一个CSDN的资源链接,Android程序员必备精品资源,在该链接的实用工具集锦中有一个工具吸引了我的注意,那就是android-resource-remover,它的解释是:一个 ...

  7. 点击<a>标签，禁止页面自动跳到顶部的解决办法

       最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

  8. Windows命令行(DOS命令)教程-7 （转载）http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_6.html

    11. deltree [功能] 删除目录树 [格式] [C:][path]DELTREE [C1:][path1] [[C2:][path2] […]] [说明] 这个命令将整个指定目录树全部消灭, ...

  9. 如何安装Windows Live Writer插件

    Windows Live Writer 是一个强大的离线博客编辑工具,通过它可以离线编辑内容丰富的博文.它不但支持微软的live space,还支持诸如Wordpress 这样的开源博客系统. Win ...

  10. 作为java应届生，面试求职那点事

    找工作两星期多了.心情不爽,写点记录打发时间. 嘘~~自己的破事:  刚毕业,也过了实习,本理所应当的留在公司转正.可是为了谈了两年的女朋友回家见面.一切都顺利进行,妈妈也开心给了一万见面礼,一切都以 ...