jQuery 特效之 添加商品到购物车

前台页面

<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": "0", "width": "0" }, 2000, function () {
                        $(".CarNum").text("1");
                    });//新图做动画，原图不变
                }
            });
        });
    </script>
</head>
<body>
    <header>
        <span>登陆</span><span>注册</span><span>购物车<span class="CarNum">0</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;">8888</span></p>
            <p>数量：<span class="mynum">1</span></p>
            <p><span class="Car">加入购物车</span><span class="gm">立即购买</span></p>
        </div>
    </div>
</body>
</html>

样式表

*{
    margin:0;
    padding:0;

}

header {
    text-align:right;
     background-color:rgba(174, 171, 171, 0.70);
     padding:5px 20px;

}

header  span{
    margin-left:10px;
}
.CarNum {
    margin:0;
    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(255, 106, 0, 0.79);
    margin-left: 10px;
    border-radius: 10px;   /*圆角*/
    cursor: pointer;  /*光标改为手*/
}

.mydh {
    width: 200px;
    height: 240px;
    opacity: .8;
    z-index: 999;  /*两张图片 把这样置于顶层*/
    position: absolute;  /*把新加的图片给个绝对定位，好做动画效果*/
}

<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": "0", "width": "0" }, 2000, function () {                        $(".CarNum").text("1");                     });//新图做动画，原图不变                }                           });        });    </script>    </head><body>    <header>        <span>登陆</span><span>注册</span><span>购物车<span class="CarNum">0</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;">8888</span></p>            <p>数量：<span class="mynum">1</span></p>            <p><span class="Car">加入购物车</span><span class="gm">立即购买</span></p>        </div>    </div></body></html>

时间： 2024-10-11 17:18:42

jQuery 特效之 添加商品到购物车的相关文章

电商网站中添加商品到购物车功能模块2017.12.8

前言: 电商网站中添加商品到购物车功能模块实现: 根据前一篇博客的介绍,我们看到淘宝网站为了保证购物车数据的同步,直接是强制用户必须登录才可以将商品加入购物车.而京东网站是用户在未登录的状态下也可以将商品加入到购物车,此时这个是保存在了cookie中,然后用户登录后,根据商品的id判断商品是否存在,将两个购物车的商品合并,形成最终的购物车商品. 本篇文章分两个模块,分别看下这两个功能是如何实现的: 1.必须在用户登录的前提下,才可以将商品加入到购物车列表 我们今天先看下淘宝网站的状态下的添加商品

添加商品到购物车add_to_cart.php

<?php session_start();//启动session $goods_id = $_POST['goods_id'];//获取商品id $number = $_POST['num'];//获取商品数量 if(empty($_SESSION["gwc"])) { //1.购物车是空的,第一次点击添加购物车 $arr[$goods_id] =array( 'goods_id' => $goods_id, 'num' => $number ); $_SESSIO

【Selenium】利用Cookies登录京东并添加商品至购物车以及结算

import json import unittest from time import sleep from selenium import webdriver from selenium.webdriver.common.keys import Keys def get_JD_cookies(): browser = webdriver.Firefox() browser.maximize_window() browser.implicitly_wait(2) url = "https://

贝塞尔曲线实现的购物车添加商品动画效果

效果图如下: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rly_bezier_curve_shopping_cart" android:layout_w

Vue 商城的一些小demo（后台添加商品、前台购物车、本地存储的使用）

demo   商城后台,添加一种商品 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> </head> <body> <div id=&

作业二：优化购物车：用户入口：1.将商品的信息存到文件中；2.将已经购买的商品、余额记录存到文件中。商家入口：1.可以添加商品；2.可以修改商品的价格

#Author:AXIN #Date:2017/5/22 12:04 #优化版的购物车 #用户入口: #1.商品的信息存到文件里 #2.已购商品,余额记录 #商家入口: #1.可以添加商品 #2.修改商品价格 product_list = [ ('Iphone',5288), ('Mac pro',12000), ('Bike',800), ('Watch',36000), ('Coffe',39), ('Python book',120), ] #将商品信息打印到console窗口下 def

用户购物车，实现添加商品的功能！

一.接口和实现类 package com.aaa.dao; import java.util.List; import java.util.Map; public interface IProductDAO { List<Map<String,Object>> getAllProduct(); /** * 获得商品的id * @param pid * @return */ Map<String ,Object>getProduct(String pid); /** *

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

/** * 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数 */ function AddToShoppingCar(id, num, type) { var _num = 1; if (num != undefined){ _num = num; } if (type == undefined){ alert("请设置产品种类"); return false; } var totalNum = _num; //总数默认为传入参数 var cookieSet

雷林鹏分享：jQuery EasyUI 拖放 - 创建拖放的购物车

jQuery EasyUI 拖放 - 创建拖放的购物车 如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西.通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能. 在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面.购物篮中的物品和价格将更新. 显示页面上的商品 Balloon Price:$25 Feeling Price:$25 正如您所看到的上面的代码,我们添加一个包含一些 元素的 元素来显示商品.所有商