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获取作用在元素上面的样式属性代码
Sep 20 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
详细分析vue响应式原理
Jun 22 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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/04/24 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue axios请求拦截实例代码
2018/03/29 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
护林防火标语
2014/06/27 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
导游词之凤凰古城
2019/10/22 职场文书