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

2024-10-22 13:42:57

一、功能描述：

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

2、购物车添加物品后，显示+1动画；

效果图如下：

实现如下：

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.fly.min.js,点击加入购物车,物品以抛物线动画效果到达购物车. 演示图: HTML 首先加载jQuery.js和jquery.fly.min.js插件. <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,作4
jQuery模拟实现天猫购物车动画效果实例代码

一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:
通过jquery实现页面的动画效果(实例代码)

有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动
vue框架制作购物车小球动画效果实例代码

最近在学习前端制作了一个购物车小球的动画效果直接上图看看效果下面介绍一下制作这个动画的详细过程: 1.因为使用vue锁业需要使用transition标签包裹并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-if=&quo
jQuery实现美观的多级动画效果菜单代码

本文实例讲述了jQuery实现多级动画效果菜单代码.分享给大家供大家参考.具体如下: 这是基于jQuery实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用.这种菜单一般应用于大站,不过如果你的站点内容比较多,也是可以考虑的哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-animate-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
javascript 通用loading动画效果实例代码

由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法:代码如下: 复制代码代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操
Android直播app送礼物连击动画效果(实例代码)

最近在做公司的直播项目,需要实现一个观看端连击送礼物的控件: 直接上代码: /** * @author yangyinglong on 2017/7/11 16:52. * @Description: todo(这里用一句话描述这个类的作用) * @Copyright Copyright (c) 2017 Tuandai Inc. All Rights Reserved. */ public class CustomGiftView extends LinearLayout { private
Android xml实现animation的4种动画效果实例代码

animation有四种动画类型:分别为alpha(透明的渐变).rotate(旋转).scale(尺寸伸缩).translate(移动),二实现的分发有两种,一种是javaCode,另外一种是XML,而我今天要说的是XML实现的方法,个人感觉javaCode的实现方法比xml要简单,所以有需要的可以自己去找找资料看看. 先给大家展示下效果图,如果大家感觉还不错,请继续往下阅读. 下面是我的四个xml文件,分别代表这四种动画类型. alpha.xml COde: <?xml version=&quo
利用canvas实现的加载动画效果实例代码

前言以前在浏览文章时,看到过一个Android的加载效果,觉得挺好看的,于是自己就模仿了一个.下面话不多说,我们直接来看看详细的介绍吧. 运行效果图分析下这个效果: 1.可以把这四个方块标号 2.这个运动效果其实只用分解为两段动画,一段是上下移动,一段是左右移动. 示例代码: /*核心代码*/ /*分析动画,其实动画只有两次的执行*/ var for_index = 1;//记录当前执行动画的序列 var interval = setInterval(function(){ if(for_i
JavaScript实现的3D旋转魔方动画效果实例代码

JS1K是JavaScript编程竞赛--参加竞赛的规则很简单,脚本必须小于1K,竞赛网站开始也只是为了娱乐,却意外地收到了很多优秀的作品. 这是2016年JS1k上传的作品,用几十行代码实现的一个3D旋转魔方: 代码如下: function z(t, e) { return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+" px;position:absolute;" : document
jQuery模拟Marquee实现无缝滚动效果完整实例

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

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

相关推荐

随机推荐