购物车飞入动画
当用户点击“加入购物车”按钮时,当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落入页面右侧的购物车里,并提示操作成功。
使用方法
1、在head引入jQuery和jquery.fly.min.js
接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。
02 |
< img src = "images/lg.jpg" width = "180" height = "180" > |
03 |
< h4 >¥< span >3499.00</ span ></ h4 > |
04 |
< p >LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</ p > |
05 |
< a href = "#" class = "button orange addcar" >加入购物车</ a > |
08 |
< img src = "images/hs.jpg" width = "180" height = "180" > |
09 |
< h4 >¥< span >3799.00</ span ></ h4 > |
10 |
< p >Hisense/海信 LED50T1A 海信电视官方旗舰店</ p > |
11 |
< a href = "#" class = "button orange addcar" >加入购物车</ a > |
14 |
< img src = "images/cw.jpg" width = "180" height = "180" > |
15 |
< h4 >¥< span >¥3999.00</ span ></ h4 > |
16 |
< p >Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</ p > |
17 |
< a href = "#" class = "button orange addcar" >加入购物车</ a > |
20 |
< img src = "images/ls.jpg" width = "180" height = "180" > |
21 |
< h4 >¥< span >6969.00</ span ></ h4 > |
22 |
< p >乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</ p > |
23 |
< a href = "#" class = "button orange addcar" >加入购物车</ a > |
然后,我们还需要在页面的右侧加上购物车以及提示信息。
1 |
< div class = "m-sidebar" > |
7 |
< div id = "msg" >已成功加入购物车!</ div > |
css代码,可以放到单独的css文件引入,也可以放到head里面:
01 |
.box{ float : left ; width : 198px ; height : 320px ; margin-left : 5px ; border : 1px solid #e0e0e0 ; text-align : center } |
02 |
.box p{ line-height : 20px ; padding : 4px 4px 10px 4px ; text-align : left } |
03 |
.box:hover{ border : 1px solid #f90 } |
04 |
.box h 4 { line-height : 32px ; font-size : 14px ; color : #f30 ; font-weight : 500 } |
05 |
.box h 4 span{ font-size : 20px } |
06 |
.u-flyer{ display : block ; width : 50px ; height : 50px ;border-radius: 50px ; position : fixed ; z-index : 9999 ;} |
08 |
.m-sidebar{ position : fixed ; top : 0 ; right : 0 ; background : #000 ; z-index : 2000 ; width : 35px ; height : 100% ; font-size : 12px ; color : #fff ;} |
09 |
.cart{ color : #fff ; text-align : center ; line-height : 20px ; padding : 200px 0 0 0px ;} |
10 |
.cart span{ display : block ; width : 20px ; margin : 0 auto ;} |
11 |
.cart i{ width : 35px ; height : 35px ; display : block ; background : url (car.png) no-repeat ;} |
12 |
#msg{ 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 } |
我们要实现的效果是,当用户点击“加入购物车”按钮时,当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落入页面右侧的
购物车里,并提示操作成功。在飞出之前,我们要获取当前商品的图片,然后调用fly插件,之后的抛物线轨迹都是由fly插件完成,我们只需定义起点和终点
等参数即可。
03 |
var offset = $( "#end" ).offset(); |
04 |
$( ".addcar" ).click( function (event){ |
06 |
var img = addcar.parent().find( 'img' ).attr( 'src' ); |
07 |
var flyer = $( '<img class="u-flyer" src="' +img+ '">' ); |
20 |
$( "#msg" ).show().animate({ '250px' }, 200).fadeOut(1000); |
21 |
addcar.css( "cursor" , "default" ).removeClass( 'orange' ).unbind( 'click' ); |
复制上面的代码,保存并运行即可看到效果,Fly插件的项目官网地址是:https://github.com/amibug/fly,值得一提的是,IE10以下需要添加以下js:
1 |
<script src= "requestAnimationFrame.js" ></script> |