加入购物车动画效果

最新推荐文章于 2024-08-07 16:12:37 发布

yyongsheng

最新推荐文章于 2024-08-07 16:12:37 发布

阅读量1.3k

点赞数

分类专栏：前台

前台专栏收录该内容

37 篇文章 0 订阅

订阅专栏

网址 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> 

//js

script> 
$(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>