友情提示：垃圾评论一律封号，下载出错或者资源有问题请联系全栈客服QQ
jQuery商品快速飞入购物车
所需积分：20
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值基于jQuery加入购物车飞入动画特效。这是一款电商购物网站常用的把商品加入购物车代码。效果图如下：
实现的代码。
html代码：
&div id="main"&
&div class="demo"&
&div class="box"&
&img src="images/lg.jpg" width="180" height="180"&
&&span&3499.00&/span&&/h4&
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计&/p&
&a href="#" class="button orange addcar"&加入购物车&/a&
&div class="box"&
&img src="images/hs.jpg" width="180" height="180"&
&&span&3799.00&/span&&/h4&
Hisense/海信 LED50T1A 海信电视官方旗舰店&/p&
&a href="#" class="button orange addcar"&加入购物车&/a&
&div class="box"&
&img src="images/cw.jpg" width="180" height="180"&
&&span&&3999.00&/span&&/h4&
Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视&/p&
&a href="#" class="button orange addcar"&加入购物车&/a&
&div class="box"&
&img src="images/ls.jpg" width="180" height="180"&
&&span&6969.00&/span&&/h4&
乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视&/p&
&a href="#" class="button orange addcar"&加入购物车&/a&
&div class="m-sidebar"&
&div class="cart"&
&i id="end"&&/i&&span&购物车&/span&
&div id="msg"&
已成功加入购物车！&/div&
width: 820px;
margin: 60px auto 10px auto;
.m-sidebar
position: fixed;
background: #000;
z-index: 2000;
width: 35px;
height: 100%;
font-size: 12px;
color: #fff;
color: #fff;
text-align: center;
line-height: 20px;
padding: 200px 0 0 0px;
.cart span
display: block;
width: 20px;
margin: 0 auto;
width: 35px;
height: 35px;
display: block;
background: url(car.png) no-repeat;
position: fixed;
top: 300px;
right: 35px;
z-index: 10000;
width: 1px;
height: 52px;
line-height: 52px;
font-size: 20px;
text-align: center;
color: #fff;
background: #360;
display: none;
float: left;
width: 198px;
height: 320px;
margin-left: 5px;
border: 1px solid #e0e0e0;
text-align: center;
line-height: 20px;
padding: 4px 4px 10px 4px;
text-align: left;
.box:hover
border: 1px solid #f90;
line-height: 32px;
font-size: 14px;
color: #f30;
font-weight: 500;
.box h4 span
font-size: 20px;
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
z-index: 9999;
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 16px/100% 'Microsoft yahei' ,Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
.button:hover
text-decoration: none;
.button:active
position: relative;
/* orange */
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
.orange:hover
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
.orange:active
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
$(function () {
var offset = $("#end").offset();
$(".addcar").click(function (event) {
var addcar = $(this);
var img = addcar.parent().find('img').attr('src');
var flyer = $('&img class="u-flyer" src="' + img + '"&');
flyer.fly({
left: event.pageX,
top: event.pageY
left: offset.left + 10,
top: offset.top + 10,
onEnd: function () {
$("#msg").show().animate({ width: '250px' }, 200).fadeOut(1000);
addcar.css("cursor", "default").removeClass('orange').unbind('click');
this.destory();
阅读(...) 评论()求助怎样样用jQuery制作出1个图片飞入购物车的动画？求大神帮助_百度知道
求助怎样样用jQuery制作出1个图片飞入购物车的动画？求大神帮助
助怎样样用jQuery制作出1个图片飞入购物车的动画？RT。点击“立即购买”，产品图会飞入右侧的购物车中。需要用jQuery来实现这1效果。这个问题我已解决了。谢谢大家的回答
我有更好的答案
jquery的animate() ，详见w3school，有详细的例子和demo
查看原帖&&希望采纳
采纳率：65%
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。jQuery 图片淡入淡出轮换 每换一张图片从左侧飞入一串字 大神快来 在线等_百度知道
jQuery 图片淡入淡出轮换 每换一张图片从左侧飞入一串字 大神快来 在线等
图片自动轮播
轮播时候每换一次图片就从左侧飞入一串字
我有更好的答案
是这种的吗？
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}