浙江 杭州

基于jQueryUI的商品添加到购物车动画特效

系统分类: 网页特效 - jquery插件 - jQuery UI框架 2017-03-13

人气5904

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的基于jQueryUI的商品添加到购物车动画特效。该购物车动画在用户点击添加到购物车按钮之后,该商品的缩略图会被缩小,并移动到购物车小图标中,制作出将商品放入购物车内的效果。

制作方法

HTML结构

该购物车动画特效的HTML结构采用嵌套<div>的HTML结构。每一个div.item是一个商品。span.car是购物车小图标。

<div class="wrapper">
    <h1 class="title">Phone Stock</h1>
  <span class="car"><i class="shopping-cart"></i></span>
    <div class="clear"></div>
    <!-- items -->
    <div class="items">
        <!-- single item -->
        <div class="item">
            <img src="img/droid-x.jpg" alt="item" />
             <h2>droid-x</h2>
            <p>Price: <em>$255</em>
            </p>
            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <!--/ single item -->
        ...
    </div>
    <!--/ items -->
</div>             
              
CSS样式

这个效果的CSS样式非常简单,它使用元素浮动模式将各个商品排列为网格布局。

.wrapper {
    width: 705px;
    margin: 20px auto;
    padding: 20px;
}
.items {
    display: block;
    margin: 20px 0;
}
.item {
    background-color: #fff;
    float: left;
    margin: 0 10px 10px 0;
    width: 205px;
    padding: 10px;
    height: 290px;
}
.item img {
    display: block;
    margin: auto;
}
h2 {
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
button {
    border: 1px solid #722A1B;
    padding: 4px 14px;
    background-color: #fff;
    color: #722A1B;
    text-transform: uppercase;
    float: right;
    margin: 5px 0;
    font-weight: bold;
    cursor: pointer;
}
span.car {
    float: right;
}
.shopping-cart {
    display: inline-block;
    background: url('../img/_cart.png') no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}                
              
JAVASCRIPT

jQuery代码中,为每一个.add-to-cart按钮绑定了鼠标点击事件。然后通过按钮来查找该按钮对应的水平的缩略图。如果缩略图存在,就通过clone()方法将它复制一份。最后通过animate()方法来将缩略图副本进行移动操作。在添加商品之后购物车的抖动动画通过设置一个定时器来完成。

$('.add-to-cart').on('click', function () {
    var cart = $('.shopping-cart');
    var imgtodrag = $(this).parent('.item').find('img').eq(0);
    if (imgtodrag) {
        var imgclone = imgtodrag.clone().offset({
            top: imgtodrag.offset().top,
            left: imgtodrag.offset().left
        }).css({
            'opacity': '0.5',
            'position': 'absolute',
            'height': '150px',
            'width': '150px',
            'z-index': '100'
        }).appendTo($('body')).animate({
            'top': cart.offset().top + 10,
            'left': cart.offset().left + 10,
            'width': 75,
            'height': 75
        }, 1000, 'easeInOutExpo');
        setTimeout(function () {
            cart.effect('shake', { times: 2 }, 200);
        }, 1500);
        imgclone.animate({
            'width': 0,
            'height': 0
        }, function () {
            $(this).detach();
        });
    }
});                
              

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:118.01KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1726.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于jQueryUI的商品添加到购物车动画特效

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)