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 相关文章推荐
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
JavaScript的目的分析
2007/01/05 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python中xrange和range的区别
2014/05/13 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python读写配置文件的方法
2015/06/03 Python
Python 探针的实现原理
2016/04/23 Python
Django返回json数据用法示例
2016/09/18 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
体现团队精神的口号
2014/06/06 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
文明社区申报材料
2014/08/21 职场文书
活动总结格式
2014/08/30 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2015年暑假生活总结
2015/07/13 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python