jquery 仿天猫加入购物车，小图标慢慢上升消失

首先加载jQuery.js和jquery.fly.min.js插件。
js 文件网上可以下载

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

然后，一个页面加入购物车按钮

 <input name="addShopCart" type="button" id="addShopCart" class="addcar fu_btn" value="加入购物车" onkeydown="if(event.keyCode==13)return false;" />

一个浮动图片的css

.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999999;-webkit-transform: translateZ(0);}

最主要的加入购物车js

 var timeout;
$(document).ready(function(){//$(function() { $(".addcar").click(function(event){    var model= $(".labModel").text();$.ajax({url: "ajaxHelp.html", type: "POST",dataType: "text",async: false,data: {method: "addShopcart",goods_id:$('.goods_id').val(),goodsNum: $('#goodsNum').val(),name: $('.goodsName').val(),specid: $('.specid').val(),model: $('.model').val(),vipPrice:$('.vipPrice').val(),imgUrl:$('.imgUrl').val()},success: function(msg){var img =$('#img').attr('src');var flyer = $('<img class="u-flyer" src="'+img+'">'); var offset = $(".addcar").offset(); var startLeft=offset.left+50;var startTop=event.pageY-$(document).scrollTop()-50;var endoffset = $("#shopCart").offset(); var topHeight=endoffset.top-$(window).scrollTop();var leftmargin=endoffset.left+15;if($.browser.msie) { //alert("IE");startTop=startTop-30;topHeight=topHeight+10;leftmargin=leftmargin+2;//$("#msg1").css('top',280);}if($.browser.mozilla) { //alert("Firefox");topHeight=topHeight+10;leftmargin=leftmargin;//$("#msg1").css('top',288);}if(window.navigator.userAgent.indexOf('Chrome') != -1) {                        //alert("");if(is360se()){  //alert("360");topHeight=topHeight+10;leftmargin=leftmargin;}else{  //alert("google");//$("#msg1").css('top',320);topHeight=topHeight+10;leftmargin=leftmargin;}  //leftmargin=1566;}if(window.navigator.userAgent.indexOf('TheWorld') != -1) { //alert("世界之窗");topHeight=topHeight;leftmargin=leftmargin;}$("#msgCart").css('top',topHeight-10);flyer.fly({ start: { left: startLeft, //开始位置（必填）#fly元素会被设置成position: fixed top: startTop//开始位置（必填） }, end: { left: leftmargin, //结束位置（必填） top: topHeight, //结束位置（必填） width: 10, //结束时宽度 height: 10 //结束时高度 }, onEnd: function(){ //结束回调 this.destory();var animateStateTop=topHeight-10;var animateEndTop=topHeight-50;$("#msg").css("top",animateStateTop);$("#msg").show().animate({top:animateEndTop},1000).fadeOut(1000,function(){$("#msg").css("top",animateStateTop);});$("#divCollect").hide();$("#msgCart").show();timeout=setTimeout(function(){$("#msgCart").fadeOut()}, 8000);$(".cart_num").text(msg);$(".gouwuche").text(msg);} }); },error: function(jqXHR, textStatus, errorThrown) {alert("添加失败;"+jqXHR.responseText);}}); });
});

以上代码即可完成加入购物车效果，是不是很棒啊！Fly插件官网：https://github.com/amibug/fly，另外兼容IE10以下需要添加以下js文件：
演示网站是我做的，如果有不懂的地方可以v我，shisezhe0

<script src="requestAnimationFrame.js"></script>

（演示网址http://www.shisezhe.com/goods-102154.html）

jquery 仿天猫加入购物车，小图标慢慢上升消失相关推荐

jQuery仿天猫完美加入购物车
转载自:http://www.iteye.com/topic/1138064 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
jQuery仿天猫京东商城楼层滚动跳转代码分享
一款购物商城常用的jQuery仿天猫京东商城楼层滚动跳转代码,点击楼层跳转定位到指定位置,右下角还有返回顶部按钮. 示例图: 仿天猫京东商城楼层滚动跳转代码 js代码段: <script ty ...
基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览源码下载部分代码: <div class=&quo ...
Android6.0风格图标,jQuery仿Android样式扁平风格图标插件
Flatify是一款可以制作安卓(Android)样式的Material-Design扁平风格图标的jQuery插件.它小巧实用,通过简单的设置,就可以制作出多种扁平风格的图标. 使用方法使用该扁平 ...
jQuery仿天猫翻牌抽奖代码
下载地址jQuery基于css3属性制作手机端翻牌抽奖游戏,通过点击卡片翻牌中奖代码.3种实例:正常的翻牌流程.一来就将牌设置为反面状态.设置不能点击的翻牌抽奖代码. dd:
VUE购物车添加统计价格购物车小图标数量统计
!!!!!!!!!!! 列表页购物车渲染<div class="box"><div class="div1"></div>& ...
用jQuery仿写出马里奥小游戏
CSS页面代码: *{margin: 0;padding: 0;}.games{width: 1500px;height: 800px;margin: 50px auto;background-col ...
仿天猫购物车（Android studio 仿天猫详情页面添加购物车选择颜色尺寸demo）
这是我第一次编写博客,有不好的地方请发邮件或留言告知. 注*请勿转载-转载需博主同意 1.首先就是设计页面了–先效果图 2.现在开始看代码,没有啥好说的这是布局文件 MainActivity 里面的 ...
自学小程序，我教你呀（三）实现大转盘仿天猫抽奖跑马灯效果
往期精选: 自学小程序,我教你呀(一)简单倒计时自学小程序,我教你呀(二)小程序实现电商秒杀倒计时效果基本实现功能 1,小程序仿天猫超市抽奖大转盘 2,跑马灯效果 3,开始抽奖,抽奖完成后有弹窗 ...
微信小程序源码大集004---小程序实现大转盘仿天猫抽奖跑马灯效果（有图有源码）
10天零基础入门微信小程序开发,只讲干货,实战入门,10天开发属于自己的上线小程序. 10天零基础入门小程序系列教程基本实现功能 1,小程序仿天猫超市抽奖大转盘 2,跑马灯效果 3,开始抽奖,抽奖完 ...

jquery 仿天猫加入购物车，小图标慢慢上升消失

jquery 仿天猫加入购物车，小图标慢慢上升消失相关推荐

最新文章

热门文章