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 相关文章推荐
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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/02/28 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python retrying模块的使用方法详解
2019/09/25 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
学生党员思想汇报
2013/12/28 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技