前台页面

<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. Oracle 用户、对象权限、系统权限

    --================================ --Oracle 用户.对象权限.系统权限 --================================  一.用户与模式 ...

  2. python之面向对象(一)

    python编程分为三个阶段: 面向过程编程:根据业务逻辑从上到下垒 函数式编程:将某功能进行函数封装,使用时调用函数即可,减少代码重复量 面向对象编程:对函数进行分类和封装 理论上我们是比较鄙视面向 ...

  3. JavaScript 函数方法 - toString()

    Function.prototype.toString() 返回函数代码的字符串形式. 描述 Function 对象覆盖了从 Object 继承来的 Object.prototype.toString ...

  4. 【Solr初探】Solr安装，启动，查询，索引

    1. 安装&启动 官网:http://lucene.apache.org/solr/ 下载源代码,解压,进入根目录(我把solr放在/usr/local/solr下) 在/usr/local/ ...

  5. Jobs定时器 - Quartz

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...

  6. VS2015试验随手记

    1.第一次安装时,未完整安装,没有安装MFC,导致可以创建MFC工程,但是不能编译 解决办法,修改安装,加入MFC 2.学习创建windows runtime component,第一次使用,可以得到 ...

  7. Window7下手动编译最新版的PCL库

    PCL简介 PCL是Point Cloud Library的缩写,是一个用于处理二维图像,三维深度图像和三维点云的C++库.该库是完全开源的,可免费用于商业和学术研究. 官方网站:http://poi ...

  8. RCP打包出来 运行 出现 JVM terminated.exit code = 13

    在建立PM.product,即打包时,没有添加相应的插件,导致无法运行

  9. 我的django之旅（三）数据库和模型

    我的django之旅(三)模型和数据库 标签(空格分隔):模型 数据库 ORM 1.django ORM django内置了一套完整的解决方案,其中就包括他自己的ORM.可惜没有使用SQLAlchem ...

  10. 【7】用Laravel5.1开发一个简单的博客系统

    声明: 本教程参考Jeffrey way 在laracasts.com上的视频教程,感谢Jeffrey way为大家带来的精彩教程,本教程如有侵权,请及时告知,联系邮箱wanglv93@gmail.c ...