jQuery 动画之 添加商品到购物车

时间：2021-12-19 09:41:30

前台页面

<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 动画之 添加商品到购物车

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

  1. 添加商品到购物车add&lowbar;to&lowbar;cart&period;php（学生笔记）

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

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

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

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

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

  4. Flutter实战视频-移动电商-51&period;购物车&lowbar;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. windows 下使用Nginx替代apache作为服务器

    说实话, 在windows下使用Nginx 着实有点不太方便, 但因项目需求, 又不想换系统(虽然可以搞个虚拟机玩), 只能用Nginx了 好了, 不多说了. 开始... 首先我用的是xampp包(A ...

  2. 利用奇异值分解（SVD）简化数据

    特征值与特征向量 下面这部分内容摘自:强大的矩阵奇异值分解(SVD)及其应用 特征值分解和奇异值分解在机器学习领域都是属于满地可见的方法.两者有着很紧密的关系,在接下来会谈到,特征值分解和奇异值分解的 ...

  3. 在Java控制台模拟dos命令下操作MySQL

    一.导入mysql的驱动:"com.mysql.jdbc.Driver", 必须将mysql的驱动 包(jar文件)导入到本工程中. Class.forName("com ...

  4. BZOJ1013 球形空间产生器sphere

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  5. 解决Deprecated&colon; mysql&lowbar;connect&lpar;&rpar;&colon; The mysql extension is deprecated and will be removed in the future&colon; use mysqli or PDO instead

    因为最近更新的PHP版本,写sql语句,忽然发现不能用了,上网查了一些原因,找到几个方法如下: 1.禁止php报错 display_errors = on 改成 display_errors = of ...

  6. 将单链表的每K个节点之间逆序

    [说明]: 本文是左程云老师所著的<程序员面试代码指南>第二章中“将单链表的每K个节点之间逆序”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解析说明, ...

  7. 浅谈hbase表中数据导出导入（也就是备份）

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=23916356&id=3321832 最近因为生产环境hbase ...

  8. flask开发用户管理系统wtf版

    #coding=utf-8 from flask import Flask from flask import request from flask import redirect from flas ...

  9. http协议进阶（五）连接管理

    几乎所有的HTTP通信都是由TCP/IP承载的,TCP/IP是全球计算机网络设备都在使用的一种分组交换网络分层协议集. 它的特点是只要连接建立,客户端与服务器之间的报文交换就永远不会丢失.受损或失序. ...

  10. Ubuntu Apache 不同端口监听不同站点

    在/etc/apache2/apache2.conf 中,把项目根目录设置成默认的/var/www 不要设置在某个站点的路径下(我就是配置第一个站点时改了这里才会配置第二个站点时好久弄不出来) 在 / ...

相关文章