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/ ...
随机推荐
- linux源代码阅读笔记 find_entry分析
78 static struct buffer_head * find_entry(struct m_inode * dir, 79 const char * name, int namelen, s ...
- [转载]Spring Autowire自动装配介绍
转自: http://www.cnblogs.com/zhishan/p/3190757.html 在应用中,我们常常使用<ref>标签为JavaBean注入它依赖的对象.但是对于一个大型 ...
- POJ2676Sudoku
http://poj.org/problem?id=2676 题意 : 这个是我最喜欢玩的数独了,就是一个9乘9的宫格,填上1到9九个数字,每行每列每个宫格之内不能有重复的数字,给出的九宫格中,0是待 ...
- 关于ios 8 7 下的模态窗口大小的控制 代碼+場景(mainstoryboard)( Resizing UIModalPresentationFormSheet )
1 代碼 UIViewController* modalController = [[UIViewController alloc]init];modalController.modalTransit ...
- Android 监测手机联网状态 wifi、移动数据流量、无联网状态
手机当完成联网时会发送一个广播,我们只要创建一个广播接收者即可,代码如下: package com.example.NetworkChangeReceiver2; import android.con ...
- Oracle的学习二:表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询)
1.Oracle表的管理 表名和列名的命名规则: 必须以字母开头: 长度不能超过30个字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z, a-z, 0-9, $, # 等. Oracl ...
- 最长不下降子序列//序列dp
最长不下降子序列 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 求最长不下降子序列的长度 输入格式 第一行为n,表示n个数第二行n个数 输出格式 最长不下降 ...
- unity3d泰斗破坏神2----课程列表
免费 课时1:泰斗破坏神第一支预告视频 01:32免费 课时2:泰斗破坏神第二支预告视频 01:58第 1 章 : 游戏开始 用户登录 服务器选择课时3:游戏开始 用户登录 服务器选择课时4:素材介绍 ...
- java socket知识点
3.用线程池实现TCP服务器端时,首先创建一个ServerSocket实例,然后创建N个线程,每个线程反复循环,从(共享的)ServerSocket实例接收客户端连接.当多个线程同时调用一个Serve ...
- chmod u+x 脚本文件
[root@ossec-server Shell]# chmod u+x whologged.sh解释: chmod:改变权限 u:文件所有用户 +x: 增加可执行权限 [root@ossec-ser ...