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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery冲突问题解决方法
Jan 19 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Python解析nginx日志文件
2015/05/11 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python实现内存监控系统
2021/03/07 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
网络安全方面的面试题
2015/11/04 面试题
促销活动总结报告
2014/04/26 职场文书
单位承诺书格式
2014/05/21 职场文书
三严三实心得体会范文
2014/10/13 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
详解Python中__new__方法的作用
2022/03/31 Python