加入购物车 动画效果

网址 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:leftwidth:198pxheight:320pxmargin-left:5pxborder:1px solid #e0e0e0text-align:center.box p{line-height:20pxpadding:4px 4px 10px 4pxtext-align:left.box:hover{border:1px solid #f90.box h4{line-height:32pxfont-size:14pxcolor:#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:blockbackground:url(car.png) no-repeat;} 
#msg{position:fixedtop:300pxright:35pxz-index:10000width:1pxheight:52pxline-height:52pxfont-size:20pxtext-align:centercolor:#fffbackground:#360display: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> 

阅读更多
个人分类: 前台
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭