刚接手一个小玩意，值得收藏分享给大家！
《产品图片飞入购物车的jQuery动画》
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">*{ margin:0; padding:0;}.good-area{ width:200px; position:absolute; left:100px; top:50px;}.good{ width:200px; height:180px; background:#ccc;}.good img{ width:100%; height:100%;}.shop_car{ width:100px; height:30px; line-height:30px; text-align:center; position:absolute; left:1000px; top:300px; background:#eee; color:red;}#add_shopcar{ height:20px; line-height:20px; text-align:center; color:#03F; background:#F90;}</style></head><body><div class="good-area"> <div class="good"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dreamjser.com/images/good.jpg" /></div> <div class="add_shopcar">加入购物车</div></div><div class="shop_car" id="shop_car">我是购物车</div><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dreamjser.com/js/jquery-1.8.0.min.js"></script><script type="text/javascript">(function(){ var shop_car=$('#shop_car'), carLeft=shop_car.offset().left, carTop=shop_car.offset().top; /** *为所有购买按钮增加动画效果 **/ $('.add_shopcar').click(function(){ var good=$(this).parent().find('.good'), goodLeft=good.offset().left, goodTop=good.offset().top; if(good.is(':animated')){ return; } var copyGood=good.clone(); $('body').append(copyGood); copyGood.css({position:'absolute',left:goodLeft,top:goodTop,border:'5px #f00 solid'}); copyGood.animate({width:80,height:80,left:carLeft,top:carTop,opacity:1},800,function(){ copyGood.remove(); }); });})();</script></body></html>
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦