jquery加入购物车飞入的效果
主要原理是:点击当前图片的时候,复制(克隆)当前图片在当前位置,然后利用jQuery的animate()方法实现图像的飞入效果
效果预览:http://runjs.cn/detail/qmf0mtm1
function MoveBox(obj) {
var divTop = $(obj).offset().top;
var divLeft = $(obj).offset().left;
$(obj).css({ "position": "absolute", "z-index": "", "left": divLeft + "px", "top": divTop + "px" });
$(obj).parent().append($(obj).clone());
$(obj).animate({ "left": ($("#posBtnR", parent.document).offset().left - $("#posBtnR", parent.document).width()) + "px", "top": $("#posBtnR", parent.document).offset().top + "px", "width": "100px", "height": "70px" }, , function () {
$(obj).animate({ "left": $("#posBtnR", parent.document).offset().left + "px", "top": $("#posBtnR", parent.document).offset().top + "px" }, );
num++;
$("#btn_num", parent.document).text(num).animate({ 'opacity': , 'marginTop': '' }, , function () {
setTimeout(function () { $("#btn_num", parent.document).hide() }, );
});
});
}
jquery加入购物车飞入的效果的更多相关文章
- 基于jQuery加入购物车飞入动画特效
基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main& ...
- jQuery实现加入购物车飞入动画效果
<script src="jquery.js"></script> <script src="jquery.fly.min.js" ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- Jquery实现购物车物品数量的加减特效
今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...
- jQuery实现购物车物品数量的加减
基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...
- jQuery实现购物车计算价格功能的方法
本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: <%@ page language="java" con ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CString 转换成 char *
最近用到CString类,转换成 char * 类型,下面介绍用法: 一.CString 和 LPSTR 转换: CString转换成LPSTR: 方法一:CString server; LPSTR ...
- NData BUG 记录
一.collection 如果设计如下页面 页面模型如下 using UnityEngine; using System.Collections; using System.Collections.G ...
- 【面试题004】c/c++字符串,替换空格
一,c/c++字符串 1.C/C++中每个字符串都以字符’\0‘作为结尾,这样我们就能很方便地找到字符串的最后尾部. 由于这个原因每个字符串都有一个额外的开销,注意字符串越界的问题: 2.C/C+ ...
- POJ2104 K-th number 函数式线段树
很久没打代码了,不知道为什么,昨天考岭南文化之前突然开始思考起这个问题来,这个问题据说有很多种方法,划分树什么的,不过对于我现在这种水平还是用熟悉的线段树做比较好.这到题今年8月份的时候曾经做过,那个 ...
- 2010年山东省第一届ACM大学生程序设计竞赛 Balloons (BFS)
题意 : 找联通块的个数,Saya定义两个相连是 |xa-xb| + |ya-yb| ≤ 1 ,但是Kudo定义的相连是 |xa-xb|≤1 并且 |ya-yb|≤1.输出按照两种方式数的联通块的各数 ...
- [转]Win7下Eclipse中文字体太小
最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 3.7 用的字体是 Consolas,显示中文的时候默认太小了. 解决方式有两种:一. ...
- lintcode: 翻转链表
题目: 翻转链表 翻转一个链表 样例 给出一个链表1->2->3->null,这个翻转后的链表为3->2->1->null 挑战 在原地一次翻转完成 解题: 递归还 ...
- platform_driver_register(),platform_device_register()区别
设备与驱动的两种绑定方式:在设备注册时进行绑定及在驱动注册时进行绑定. 以一个USB设备为例,有两种情形: (1)先插上USB设备并挂到总线中,然后在安装USB驱动程序过程中从总线上遍历各个设备,看驱 ...
- phpmyadmin导入大sql文件失败解决办法
摘自:http://www.xunway.com/info/post/499.asp 昨天小编的一个客户在在利用phpmyadmin导入大sql文件的时候,总是提示错误,反应给小编,小编也是第一次遇到 ...
- java中什么时候该用static修饰方法?有什么好处或者坏处?
当一个方法或者变量需要初始化加载,或者是经常被调用的时候可以加上static.用static修饰的方法可以用类名直接调用,不用的一定要先实例化一个对象然后才可以调用比如 person这个类里面有一个方 ...