飞入购物车功能

最近开发无形的系统,做飞入购物车的功能

抛物线飞入购物车

引用插件http://www.jq22.com/jquery-info4560

$(function() {
    var offset = $("#end").offset();  //结束的地方的元素
    $(".btn-smb").click(function(event){   //是$(".btn-smb")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
        var addcar = $(this);
        var img = addcar.parentsUntil("li").find(‘img‘).attr(‘src‘);
        var flyer = $(‘<img class="u-flyer" src="‘+img+‘">‘);
        flyer.fly({
            start: {
                left: event.pageX,
                top: event.pageY
            },
            end: {
                left: offset.left+10,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            onEnd: function(){
                $("#msg").show().animate({width: ‘250px‘}, 300).fadeOut(1000);                 //按钮变成禁用
                addcar.css("cursor","default").attr("disabled","disabled").unbind(‘click‘);               //数字+1
                $("#num").html(parseInt($("#num").html())+1);                 //按钮文字变成一已预订
                addcar.text("已预定");
                this.destory();
            }
        });
    });

});
时间: 2024-10-06 15:08:46

飞入购物车功能的相关文章

jQuery实现飞入购物车功能

要实现的效果:思路:点击商品,图片就会飞入购物车,不但变小,而且加入到购物车后消失 了,不但如此,商品的图片还在,所以我们使用克隆的方法,加入到购物车后清除购物车即可,然后购物车+1首先获取商品图片的位置及大小,并放到body上(否则飞入的时候看不到效果),然后获取购物车的方位,最后使用动画效果实现飞入效果.注意:怎么找商品的图片,先找父元素,再从父元素下找图片的位置前提准备:html部分: <div id="dpros"> <div class="dite

Android 购物车功能的实现

首先,众所周知,ListView是Android最常用的控件,可以说是最简单的控件,也可以说是最复杂的控件. 作为一个Android初级开发者,可能会简单的ListView展示图文信息. 作为一个有一定项目开发经验的Android开发者来说,可能会遇到ListView的列表项中存在各种按钮的需求. 需求最多的就是购物车功能.想必大家都用过某宝某东客户端APP吧 ,就是那个购物车的功能. -------------------------------------------------------

简单3步 js使用cookie实现的购物车功能[原创]

引入JQuery.js支持 加入JQuery.Cookie.js,代码如下 1 jQuery.cookie = function(name, value, options) { 2 if (typeof value != 'undefined') { // name and value given, set cookie 3 options = options || {}; 4 if (value === null) { 5 value = ''; 6 options.expires = -1;

jQuery实现一个简单的购物车功能

最近由于工作需要的原因,开始系统学习jQuery的知识,然后跟着一个视频教程做了一个购物车的功能,现总结如下. 第一步:准备HTML页面,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

session实现购物车功能

购物车功能是生活中经常使用的,这里以fruit表为例,做一个简单的购物车: 首先要将fruit表显示出来: <?php session_start();?> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>名称</td> &

jQuery 复制节点的元素实现添加到购物车功能

描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中. 效果如果: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</tit

ASP.NET之电子商务系统开发-2(购物车功能)

一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对应代码. 1.如果购物车为空,就显示   其方法是创建两个大的div层,当你没有购买商品时,就显示这层,里面啥都没有,如果你点击了一个商品加入购物车,就会将这层隐藏,显示存放刚放入购物车商品信息的那一层,其控制方法如下: DataSet ds = bllShopCar.ShopCarQT(Reque

JS实现添加至购物车功能

效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>加入购物车功能</title> 6 7 </head> 8 <body> 9 <ul> 10 <li draggable=&

给destoon商城的列表中和首页添加购物车功能

如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商城频道的首页和列表页加这个功能   第一步:修改mall/index.htm的模板 提示:如果想在首页增加添加到购物车的功能需要多一行这个代码: 在{template 'footer'}后面加如下代码 <script type="text/javascript"> var ma