首先需要引入jq jar包(百度搜索下载即可)
<script type="text/javascript" src="../../js/jquery-1.10.1.min.js"></script>
<script src="../../js/jquery.fly.min.js"></script><style type="text/css">
.u-flyer {
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
z-index: 9999;
}
#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
}
</style>
<div class="busidetail-body">
<div class="busidetail-body-left"><img src="../../img/u41_05.png" />
</div>
<div class="busidetail-body-right">
<h4>海南芝麻香蕉一斤约三根左右</h4>
<p>香甜诺的香蕉哟</p>
<p>月售130份 好评率100%</p>
<p>
<span id="" class="bbr-spanxxf">
限一份
</span>
</p>
<h5>
<b>¥2.99</b>
<del>¥5.89</del>
<div class="right">
<img class="rightimg" src="../../img/u41_04.png" />
</div>
</h5>
</div>
</div>
<footer>
<nav class="mui-bar mui-bar-tab busidetail-foot">
<img class="busidetail-foot-img" src="../../img/lanzi.png" />
未选购商品
<div class="busidetail-foot-right">¥20起送</div>
<div id="msg">已成功加入购物车!</div>
</nav>
</footer>
<script type="text/jscript">
$(function() {
var offset = $(".busidetail-foot-img").offset(); //结束的地方的元素
$(".rightimg").click(function(event) { //是$("#rightimg")这个元素点击触发的 开始动画的位置就是这个元素的位置为起点
var addcar = $(".busidetail-body-left");
var img = addcar.find('img').attr('src');
var flyer = $('<img class="u-flyer" src="' + img + '">');
flyer.fly({
start: {
left: event.clientX,
top: event.clientY
},
end: {
left: offset.left+20,
top: offset.top+20,
width: 0,
height: 0
},
onEnd: function() {
$("#msg").show().animate({
width: '250px'
}, 200).fadeOut(1000);
addcar.css("cursor", "default").removeClass('orange').unbind('click');
this.destory();
}
});
$(".busidetail-foot-img").attr('src',"../../img/lanzi_active.png");
});
});
</script>