JS高仿抛物线加入购物车特效实现代码


Posted in Javascript onFebruary 20, 2017

1. 简介

要想让你的购物车有种高大上的感觉,加入特效的功能是必不可少的。

2. 实现思路

  • 设置一些简单的样式
  • 模拟把它添加到购物车中,数量增加
  • 从点击的位置开始动画,结束动画

3. 代码实现

CSS代码

咱们给它设置一些简单的样式,让它显得不是那么的太low

.flyer {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      position: fixed;
      margin-left: 50px;
      z-index: 9999;
    }
    .cart img{
      width: 60px;
      height: 60px;
      padding: 5px 0 0 250px;
    }
    .cartBox span{
      display: block;
      color: white;
      position: absolute;
      left: 282px;
      top: 226px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      background-color: red;
    }

HTML代码

简单的结构代码,当然,现在写的都很简单!

<div class="box"> 
    ![](img/1.jpg)
  </div>
  <div class="cartBox">
    <div class="cart">
      <i id="end"></i>
        ![](img/2.jpg)
        <span>0</span>
    </div>
  </div>

简单样式

JS高仿抛物线加入购物车特效实现代码

JS代码

那么,接下来就要让它动起来了,这里我们首先要引入两个第三方库的插件,然后在写JS代码让它动起来!

<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.fly.min.js"></script>

接下来就是见证奇迹的时刻了!

$('.box').on('click', addCart);
    var num = 0;
    function addCart(event) {
      var offset = $('#end').offset(), flyer = $('![](img/1.jpg)');
      flyer.fly({
        start: {
          left: event.pageX,
          top: event.pageY
        },
        end: {
          left: offset.left + 280,
          top: offset.top,
          width: 0,
          height: 0
        }
      });
      num++;  
      $('.cartBox span').text(num);
    }

最终效果

JS高仿抛物线加入购物车特效实现代码

是不是很简单,有没有学会啊!

4. 结束语

以上就是全部内容了,希望我写东西对大家的学习或者工作能带来一定的帮助,同时也希望读者继续支持三水点靠木。

Javascript 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
获取body标签的两种方法
Oct 13 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
ES6中Math对象的部分扩展
Feb 20 #Javascript
微信小程序左滑删除效果的实现代码
Feb 20 #Javascript
JavaScript轮播图简单制作方法
Feb 20 #Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 #Javascript
原生js实现放大镜
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP实现验证码校验功能
2017/11/16 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
详解Python中的文本处理
2015/04/11 Python
使用Python写个小监控
2016/01/27 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
幼儿教师考核制度
2014/01/25 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技