网址 http://codepen.io/anon/pen/dXMzyB
//css
@import "compass/css3";
html, body{cursor: pointer;}
.m-top{
padding: 15px;margin: 20px 0;
border: 1px solid #eee;border-left-width: 5px;border-radius: 3px;border-left-color: #f0ad4e;
}
.m-tip{
user-select: none;
border: 4px solid #ccc;color: #999;opacity: 0.8;
margin: 160px auto;;
border-radius: 4px;width: 60%;
padding: 40px 0;
text-align: center;font-size:16px;
}
.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;
span{display: block;width: 20px;margin: 0 auto;}
i{
width: 35px;height: 35px;
display:block;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NTIxOERDMEREQTIxMUUzODE0RUUzMDk1QTM1RjhENiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NTIxOERDMUREQTIxMUUzODE0RUUzMDk1QTM1RjhENiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU1MjE4REJFRERBMjExRTM4MTRFRTMwOTVBMzVGOEQ2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU1MjE4REJGRERBMjExRTM4MTRFRTMwOTVBMzVGOEQ2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+nUzVwwAAAShJREFUeNpi/P//P8NgAUwMgwiMOmbUMaOOGXXMUHZMNRB/BeL/UHyKkAYWGjlEBohb0MT+U8sxvCQ6Zg6UPgPETlD2Z2o4BhS8piQ45BcQs0HZ7cQ4gtSQ+Q3EP4hUyw2lnwDxOlKCkxjHmAExKxCLEGnmSiC2BeLJpCY0RiLbMzuB2JIIdd+AWBwaVSD6A7WzNjMQCwIxBxFqxaD0AlIdQkrIMBAZVRuhiV0NiG+T6hhSypktREQVqAjYR45DSHEMKKoEiChvngNxKrklJSOJDXJGKM2DRQ5k0Bd61k2weuYzFgxySBUQfwTiTiSH0yRkQFH6AErLQgtCZMAJzdrI/B+0DJm/UIwNgCzug4ZSLxD/pHWaGW1cjTpm1DGjjhl1DLUAQIABAK/XRO9Mpf8WAAAAAElFTkSuQmCC)}
}
}
.u-flyer{
display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;
}
//html
<div class="container">
<div class="row">
<p class="m-top">code repositoy:<a href="https://github.com/amibug/fly" target="_blank">https://github.com/amibug/fly</a> <span>喜欢就在github上star一个吧</span></p>
<section class="m-tip">
click at the blank! click here</br>
在空白处点击鼠标实现放入购物车效果
</section>
</div>
</div>
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
//js
$('html,body').on('click', addProduct);
function addProduct(event){
var offset = $("#end").offset(),
flyer = $('<img class="u-flyer" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/38111/profile/profile-80_1.jpg"/>');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
width: 20,height: 20
}
});
}
//网址
http://www.helloweba.com/view-blog-294.html
<script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> //css
.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;} .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}
//html<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 class="m-sidebar"> <div class="cart"> <i id="end"></i> <span>购物车</span> </div> </div> <div id="msg">已成功加入购物车!</div>
//jsscript> $(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, //开始位置(必填)#fly元素会被设置成position: fixed 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(); //移除dom } }); }); }); </script>