专栏首页前端实习日记原生:点击加入购物车的动画

原生:点击加入购物车的动画

HTML

<div class="fly-cart">
   <div class="wrapper">
      <span><i class="shopping-cart"></i></span>
      <div class="clear"></div>
      <div class="items">
         <div class="item fly-item1">
            <div class="item-img">
               <img src="images/item2.jpg" alt="item" />
            </div>
            <h3>Unique Color Wedges </h3>
            <h6>Nemo enim ipsam voluptatem quia voluptassit aspernatur aut odit aut fugit, sed quia.</h6>
            <p>Price : <span>$29</span></p>
            <button class="add-to-cart" type="button">加入购物车</button>
            <div class="clear"></div>
         </div>
         <div class="clear"></div>
      </div>
   </div>
</div>

javascript

<script>
    $('.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({//.offset()方法获取匹配元素在当前视口的相对偏移
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })//克隆后图片的top等于之前的offset().top;left等于之前的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');
            
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()//detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
            });
        }
    });
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

    yuezhongbao
  • 插件:商品放大镜

    这段代码我哩哩啦啦写了三天多,平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半(我是分两块写的, 先是让module就是那个遮罩层能自由的在图片上跟随鼠标走...

    yuezhongbao
  • JS:js操作Cookie实现记住密码功能

    今天主管让我给工单系统填个小功能,就是在上面加一个记住密码。提示了我一句用到cookie就走了,我今天是研究了一天cookie啊,下面有三段操控cookie封装...

    yuezhongbao
  • 一个简单的卡动车排队系统

    week
  • jQueryEasyUI 的入门

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI拖动效果</title> <...

    用户5927264
  • AngularJS:如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能。 对于处理小数量,ng-repeat是非常有用的,但是如果...

    葡萄城控件
  • CSS 层叠相关知识指北

    亲爱的观众老爷们大家好~我发现我写文章都是因为工作碰到问题才写,什么探索最前沿的最讨厌了(其实是力有所不及)!言归正传,最近碰到的问题是这个:准备开发一个平台,...

    疯狂的技术宅
  • bootstrap栅格换行时产生空白解决

    最近使用bootstrap开发项目,但是用到全局css样式中栅格时候出现问题,就是当前窗口的首行正常显示,到了第二行开始则开始不能正常排布!

    十月梦想
  • bootstrap 常用导航菜单样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标...

    用户5760343
  • Laravel展示产品-CRUD之show

      上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller...

    ytkah

扫码关注云+社区

领取腾讯云代金券