前台页面

<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. JavaScript 判断一个字符串是否在另一个字符串中

    传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. start ...

  2. iPhone应用提交流程：如何将App程序发布到App Store？

    对于刚加入iOS应用开发行列的开发者来说,终于经过艰苦的Coding后完成了第一个应用后最重要的历史时刻就是将应用程序提交到iTunes App Store.Xcode 4.2开发工具已经把App提交 ...

  3. 如何在android上去控制开发进度

    这次android的壁纸软件1.0版本终于可以上线了,软件的功能基本上实现了,但是用户体验不太好.在整个开发阶段和测试阶段,出现了很多预料之外的事情,比如size是1M多的json文件解析.高清图片导 ...

  4. java动态代理和cglib动态代理

    动态代理应用广泛,Spring,Struts等框架很多功能是通过动态代理,或者进一步封装来实现的. 常见的动态代理模式实现有Java API提供的动态代理和第三方开源类库CGLIB动态代理. Java ...

  5. VMware vSphere 5.5的12个更新亮点(2)

    ACPI支持 以前版本的VMware虚拟机的局限性之一,是支持的虚拟设备数量甚少.vSphere 5.5引入了Virtual Hardware 10,这增加了基于SATA的虚拟设备节点,通过AHCI( ...

  6. Socket学习笔记

    ..........(此处略去万万字)学习中曲折的过程不介绍了,直接说结果 我的学习方法,问自己三个问题,学习过程将围绕这三个问题进行 what:socket是什么 why:为什么要使用socket ...

  7. Enable-Migrations 在应用程序配置文件中找不到xx连接字符串

    在解决方案中有多个项目时,使用Enable-Migrations 命令进行数据迁移时,出现以下错误: 尝试在Enable-Migrations 命令中指定-projectName也不行,最后将要操作的 ...

  8. 使用Dataset

    string sqlStr="Select * from Tb_news"; SqlDataAdapter myDa=new SqlDataAdapter(SqlStr,myCon ...

  9. Django REST Framework学习——Android使用REST方法访问Diango

    本文更应该叫做Android如何模拟浏览器访问Django服务器后台. 环境为: Android通过HttpClient访问服务器,从Django中获取json数据,解析显示在UI界面上. 问题为: ...

  10. String.equals（）

    名称                                               说明 String.Equals(Obejecct)            确定String实例是否指 ...