加入购物车 动画效果

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

js加入购物车抛物线动画购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ¥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ¥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ¥¥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ¥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后,我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车! CSS 我们使用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;t
可以使用jQuery的动画函数来实现加入购物车动画效果,具体实现步骤如下: 1. 给“加入购物车”按钮添加点击事件,通过jQuery选择器获取到该按钮元素,并为其添加click事件处理函数。 ```javascript $('#add-to-cart-btn').click(function() { // 动画效果代码 }); ``` 2. 获取到被添加到购物车的商品图片元素,通过jQuery选择器获取到该元素,并获取到该元素的位置信息。 ```javascript var productImg = $('#product-img'); var imgPosition = productImg.offset(); ``` 3. 在页面上添加一个新的图片元素,该元素的src属性值为被添加到购物车的商品图片的src属性值。 ```javascript var cartImg = $('<img src="' + productImg.attr('src') + '">'); ``` 4. 设置新的图片元素的样式,使其定位到被添加到购物车的商品图片的位置,并设置其宽度和高度。 ```javascript cartImg.css({ 'position': 'absolute', 'top': imgPosition.top, 'left': imgPosition.left, 'width': productImg.width(), 'height': productImg.height() }); ``` 5. 将新的图片元素添加到页面上,并使用jQuery的animate函数使其移动到购物车图标的位置,并在动画结束后将其从页面中移除。 ```javascript cartImg.appendTo('body').animate({ 'top': cartIconPosition.top, 'left': cartIconPosition.left, 'width': 0, 'height': 0 }, 1000, function() { $(this).remove(); }); ``` 完整代码如下: ```javascript $('#add-to-cart-btn').click(function() { var productImg = $('#product-img'); var imgPosition = productImg.offset(); var cartIcon = $('#cart-icon'); var cartIconPosition = cartIcon.offset(); var cartImg = $('<img src="' + productImg.attr('src') + '">'); cartImg.css({ 'position': 'absolute', 'top': imgPosition.top, 'left': imgPosition.left, 'width': productImg.width(), 'height': productImg.height() }); cartImg.appendTo('body').animate({ 'top': cartIconPosition.top, 'left': cartIconPosition.left, 'width': 0, 'height': 0 }, 1000, function() { $(this).remove(); }); }); ``` 上述代码实现了一个简单的加入购物车动画效果,可以根据需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值