jQuery模拟实现天猫购物车动画效果实例代码


Posted in jQuery onMay 25, 2017

一、功能描述:

   1、点击购买按钮,模拟抛物线将物品弹到购物车里;

   2、购物车添加物品后,显示+1动画;

效果图如下:

jQuery模拟实现天猫购物车动画效果实例代码

实现如下:

   1、导入jquery相关的包:

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script src="jquery.fly.min.js"></script>

  2、html文件内容:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现模拟天猫加入购物车飞入动画效果</title>
<meta name="keywords" content="jquery,购物车" />
<body>
<div id="main">
  <div class="demo">
    <div class="box orange button addcar">
      <div style="padding-top:55px">
      土豪,请猛击我,加入购物车
      </div>
    </div>
  </div>
  </div>
  <div class="m-sidebar">
    <div class="cart">
      <i id="end"></i>
      <span>购物车</span>
    </div>
  </div>
</div>
</body>

3、css样式:

<style type="text/css">
.demo{width:820px; margin:60px auto 10px auto}
.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 85px;height: 100%;font-size: 12px;color: #fff;}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.cart span{display:block;width:20px;margin:10 0 0 0;}
.cart i{width:50px;height:35px;display:block; background:url(car.png) no-repeat;}
#msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
.box{width:300px; height:150px; border:1px solid #e0e0e0; text-align:center}
.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
/* orange */
.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top, #faa51a, #f47a20);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top, #f88e11, #f06015);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top, #f47a20, #faa51a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

4、核心的JQuery代码:

<script>
//实现购物车+1动画效果
(function ($) {
  $.extend({
    tipsBox: function (options) {
      options = $.extend({
        obj: null, //jq对象,要在那个html标签上显示
        str: "+1", //字符串,要显示的内容
        startSize: "18px", //动画开始的文字大小
        endSize: "38px",  //动画结束的文字大小
        interval: 600, //动画时间间隔
        color: "red",  //文字颜色
        callback: function () { }  //回调函数
      }, options);
      $("body").append("<span class='num'>" + options.str + "</span>");
      var box = $(".num");
      var left = options.obj.offset().left + options.obj.width() / 2;
      var top = options.obj.offset().top - options.obj.height();
      box.css({
        "position": "absolute",
        "left": left + "px",
        "top": top + "px",
        "z-index": 9999,
        "font-size": options.startSize,
        "line-height": options.endSize,
        "color": options.color
      });
      box.animate({
        "font-size": options.endSize,
        "opacity": "0",
        "top": top - parseInt(options.endSize) + "px"
      }, options.interval, function () {
        box.remove();
        options.callback();
      });
    }
  });
})(jQuery);
function niceIn(prop){
  prop.find('i').addClass('niceIn');
  setTimeout(function(){
    prop.find('i').removeClass('niceIn');
  },1000);
}
//实现抛物线动画功能
$(function() {
  var offset = $("#end").offset();
  $(".addcar").click(function(event){
    var addcar = $(this);
    var img = "images/lg.jpg";
    var flyer = $('<img class="u-flyer" src="'+img+'">');
    flyer.fly({
      start: {
        left: event.pageX,
        top: event.pageY
      },
      end: {
        left: offset.left+10,
        top: offset.top+10,
        width: 0,
        height: 0
      },
      onEnd: function(){
        $.tipsBox({
            obj: $("#end"),
            str: "<b style='font-family:Microsoft YaHei;'>+1</b>",
            callback: function () {
            }
        });
        niceIn($("#end"));
      }
    });
  });
});
</script>

以上所述是小编给大家介绍的jQuery模拟实现天猫购物车动画效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
Jquery-data的三种用法
Apr 18 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
python处理csv数据的方法
2015/03/11 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
"引用"与多态的关系
2013/02/01 面试题
应届生.NET方向面试题
2015/05/23 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS