基於jQuery加入購物車飛入動畫特效

基於jQuery加入購物車飛入動畫特效。這是一款電商購物網站常用的把商品加入購物車代碼。效果圖如下：

在線預覽 源碼下載

實現的代碼。

html代碼：

<div id="main"> <div class="demo"> <div class="box"> <img src="images/lg.jpg" width_="180" height="180"> <h4> ￥<span>3499.00</span></h4> <p> LG 49LF5400-CA 49寸IPS硬屏富貴招財銅錢設計</p> <a href="#" class="button orange addcar">加入購物車</a> </div> <div class="box"> <img src="images/hs.jpg" width_="180" height="180"> <h4> ￥<span>3799.00</span></h4> <p> Hisense/海信 LED50T1A 海信電視官方旗艦店</p> <a href="#" class="button orange addcar">加入購物車</a> </div> <div class="box"> <img src="images/cw.jpg" width_="180" height="180"> <h4> ￥<span>￥3999.00</span></h4> <p> Skyworth/創維 50E8EUS 8核4Kj極清酷開系統智能液晶電視</p> <a href="#" class="button orange addcar">加入購物車</a> </div> <div class="box"> <img src="images/ls.jpg" width_="180" height="180"> <h4> ￥<span>6969.00</span></h4> <p> 樂視TV Letv X60S 4核1080P高清3D安卓智能超級電視</p> <a href="#" class="button orange addcar">加入購物車</a> </div> </div> </div> <div class="m-sidebar"> <div class="cart"> <i id="end"></i><span>購物車</span> </div> </div> <div id="msg"> 已成功加入購物車！</div> </div>

css代碼：

.demo { width: 820px; margin: 60px auto 10px auto; } .m-sidebar { position: fixed; top: 0; right: 0; background: #000; z-index: 2000; width: 35px; height: 100%; font-size: 12px; color: #fff; } .cart { color: #fff; text-align: center; line-height: 20px; padding: 200px 0 0 0px; } .cart span { display: block; width: 20px; margin: 0 auto; } .cart i { width: 35px; height: 35px; display: block; background: url(car.png) no-repeat; } #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; } .box { float: left; width: 198px; height: 320px; margin-left: 5px; border: 1px solid #e0e0e0; text-align: center; } .box p { line-height: 20px; padding: 4px 4px 10px 4px; text-align: left; } .box:hover { border: 1px solid #f90; } .box h4 { line-height: 32px; font-size: 14px; color: #f30; font-weight: 500; } .box h4 span { font-size: 20px; } .u-flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; z-index: 9999; } .button { 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; top: 1px; } /* orange */ .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, #faa51a, #f47a20); 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, #f88e11, #f06015); 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, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f47a20", endColorstr="#faa51a"); }

js代碼：

$(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({ 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" }, 200).fadeOut(1000); addcar.css("cursor", "default").removeClass("orange").unbind("click"); this.destory(); } }); }); });

推薦閱讀：