前台页面

<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. 自己意淫的一个简陋的Python网站扫描器

    使用的模块 threading.optparse.urllib2 本地需要放字典,名字需大写. 上代码 def request(url,pathName): try: import urllib2 p ...

  2. NetAnalyzer笔记 之 一. 开篇语

    [创建时间:2015-08-26 22:00:12] NetAnalyzer下载地址 第一次写技术相关的博客,不足之处还请担待并告知. 在开始之前,先简单介绍一下NetAnalyzer, NetAna ...

  3. Android开发常用工具汇总

    Android开发常用工具汇总,本文章不断更新完善 一.数据库小工具Sqlite Developer  SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的, ...

  4. Live555 实战之框架简单介绍

    作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 上一篇文章简要介绍了怎样以共享库的方式交叉编译Live555,今天再来介绍live源代码框架. 先 ...

  5. sdut2623--The number of steps（概率dp第一弹，求期望）

    The number of steps Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 Mary stands in a st ...

  6. File类的基本操作之InputStream字节输入流

    话不多少,我直接把代码贴上来了.有什么问题请给我留言 package org.mark.streamRW; import java.io.File; import java.io.FileInputS ...

  7. HeadFirst设计模式 之 C++实现(二)：Observer(观察者模式)

    观察者模式是最经常使用的设计模式之中的一个,[对象之间多对一的依赖关系,当一个对象发生变化时,其会通知全部依赖它的对象].拿订阅报纸和发行报社打例如,报社採集到news制作新的报纸,派送给订阅的客户. ...

  8. 给linux设置grub密码

    一.明文加密:vim /etc/grub.conf在hiddemenu下面新增一行,输入:password 密文然后:wq保存退出 在开机出现退数菜单的时候,按任意键,就会出现启动选择菜单,这时下面的 ...

  9. vs2015升级后台mvc视图编辑器默认不是razor视图引擎问题

    1.问题的原因 vs2013中创建的mvc4.0应用默认使用的razor2.0版本 在vs2015编辑器中默认使用的razor视图引擎是3.0版本 解决方案: 第一步:升级mvc应用的版本为mvc5. ...

  10. IOS — 关于Socket传输文件需要自定义延时或者包大小的情况

    1. 首先导入头文件 #include <stdio.h> #include <errno.h> #include <string.h> #include < ...