jQuery仿天猫完美加入购物车
转载自：http://www.iteye.com/topic/1138064
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿天猫完美加入购物车</title>
<meta name="keywords" content="jquery购物车,加入购物车" />
<meta name="description" content="jquery加入购物车帅气效果,和天猫、聚美优品类似" />
<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
</head>
<body>
<div class="head">
<div class="head_inner">
<a class="logo" href="http://www.sucaihuo.com">
<img alt="素材火logo" src="http://www.sucaihuo.com/Public/images/logo.jpg">
</a>
</div>
</div>
<div class="container">
<h2 class="title"><a href="http://www.sucaihuo.com/jquery/demo/1/">jQuery仿天猫完美加入购物车</a></h2>
<div class="demo clearfix">
<div class="per">
<img src="data:images/1.jpg" width="180" height="240" alt="图片二"/>
<h3>¥<span>259.00</span></h3>
<div class="title">春款真皮坡跟大码单鞋内增高女士鞋子</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="data:images/2.jpg" width="180" height="240" alt="图片二"/>
<h3>¥<span>136.00</span></h3>
<div class="title">韩国代购情侣棉衣棉服女款韩版羊羔毛大衣</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="data:images/3.jpg" width="180" height="240" alt="图片三"/>
<h3>¥<span>¥728.00</span></h3>
<div class="title">冬季运动情侣羽绒棉马甲男士薄马甲</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
<div class="per">
<img src="data:images/4.jpg" width="180" height="240" alt="图片四"/>
<h3>¥<span>119.00</span></h3>
<div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</div>
</div>
<div class="cart-sidebar">
<div class="cart">
<i id="icon-cart"></i>
<span>购物车</span>
</div>
</div>
<div id="tip">成功加入购物车！</div>
<div class="foot">
Powered by sucaihuo.com 本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
</div>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery.fly.min.js"></script>
<!--[if lte IE 9]>
<script src="js/requestAnimationFrame.js"></script>
<![endif]-->
<script type="text/javascript">
$(function() {
var offset = $("#icon-cart").offset();
$(".addcart").click(function(event) {
var img = $(this).parent().children('img').attr('src');//获取当前点击图片链接
var flyer = $('<img class="flyer-img" src="' + img + '">');//抛物体对象
flyer.fly({
start: {
left: event.pageX, //抛物体起点横坐标
top: event.pageY////抛物体起点纵坐标
},
end: {
left: offset.left + 10, //抛物体终点横坐标
top: offset.top + 10, //抛物体终点纵坐标
},
onEnd: function() {
$("#tip").show().animate({width: '200px'}, 300).fadeOut(500);//成功加入购物车动画效果
this.destory();//销毁抛物体
}
});
});
});
</script>
</body>
</html>
dome.css
.demo{width:830px; margin:0 auto}
.cart-sidebar{z-index:;width: 35px;color: #FFFFFF;position: fixed;top:;right:;background: #000000;height:100%;}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.cart span{display:block;width:20px;margin:0 auto;}
.cart i{width:35px;height:35px;display:block; background:url(../images/cart.png) no-repeat;}
#tip{position:fixed; top:300px; right:35px; z-index:; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
.per{float:left; border:1px solid #e0e0e0; text-align:center;padding:10px 0;width:198px;margin-right: 5px}
.per .title{ text-align:left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:180px;margin:0 0 10px 10px}
.per:hover{border:1px solid #f90}
.per h3{line-height:32px; font-size:14px; color:#f30;font-weight:}
.per h3 span{font-size:20px}
.flyer-img{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index:;}
.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-per-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-per-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/*****加入购物车按钮****/
.button:hover {
text-decoration: none;
}
.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');
}
jquery.fly.min.js
/*! fly - v1.0.0 - 2014-12-22
* https://github.com/amibug/fly
* Copyright (c) 2014 wuyuedong; Licensed MIT */
!function(a){a.fly=function(b,c){var d={version:"1.0.0",autoPlay:!0,vertex_Rtop:20,speed:1.2,start:{},end:{},onEnd:a.noop},e=this,f=a(b);e.init=function(a){this.setOptions(a),!!this.settings.autoPlay&&this.play()},e.setOptions=function(b){this.settings=a.extend(!0,{},d,b);var c=this.settings,e=c.start,g=c.end;f.css({marginTop:"0px",marginLeft:"0px",position:"fixed"}).appendTo("body"),null!=g.width&&null!=g.height&&a.extend(!0,e,{width:f.width(),height:f.height()});var h=Math.min(e.top,g.top)-Math.abs(e.left-g.left)/3;h<c.vertex_Rtop&&(h=Math.min(c.vertex_Rtop,Math.min(e.top,g.top)));var i=Math.sqrt(Math.pow(e.top-g.top,2)+Math.pow(e.left-g.left,2)),j=Math.ceil(Math.min(Math.max(Math.log(i)/.05-75,30),100)/c.speed),k=e.top==h?0:-Math.sqrt((g.top-h)/(e.top-h)),l=(k*e.left-g.left)/(k-1),m=g.left==l?0:(g.top-h)/Math.pow(g.left-l,2);a.extend(!0,c,{count:-1,steps:j,vertex_left:l,vertex_top:h,curvature:m})},e.play=function(){this.move()},e.move=function(){var b=this.settings,c=b.start,d=b.count,e=b.steps,g=b.end,h=c.left+(g.left-c.left)*d/e,i=0==b.curvature?c.top+(g.top-c.top)*d/e:b.curvature*Math.pow(h-b.vertex_left,2)+b.vertex_top;if(null!=g.width&&null!=g.height){var j=e/2,k=g.width-(g.width-c.width)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2),l=g.height-(g.height-c.height)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2);f.css({width:k+"px",height:l+"px","font-size":Math.min(k,l)+"px"})}f.css({left:h+"px",top:i+"px"}),b.count++;var m=window.requestAnimationFrame(a.proxy(this.move,this));d==e&&(window.cancelAnimationFrame(m),b.onEnd.apply(this))},e.destory=function(){f.remove()},e.init(c)},a.fn.fly=function(b){return this.each(function(){void 0==a(this).data("fly")&&a(this).data("fly",new a.fly(this,b))})}}(jQuery);
效果演示地址：http://www.sucaihuo.com/jquery/demo/1/
jQuery仿天猫完美加入购物车的更多相关文章
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- （转）jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
- 基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览 源码下载 部分代码: <div class=&quo ...
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- html5--项目实战-仿天猫（移动端页面）
html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...
- JQuery仿购物网站放大镜特效所遇问题及思考
JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- jQuery仿阿里云购买选择购买时间长度
效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
随机推荐
- 【《Objective-C基础教程 》笔记ch03】（四）OC中的OOP
一.声明类接口步骤: 1.声明一个类接口,使用@interfacekeyword加上类名称. 2.用 { 实例变量 } 来定义各种数据成员. 3.方法声明,採用中缀符语法声明一个c函数,用到了冒号 ...
- 转 iOS开发debug跟release版本log屏蔽方法
简单介绍以下几个宏: ) __VA_ARGS__ 是一个可变参数的宏,这个可变参数的宏是新的C99规范中新增的,目前似乎只有gcc支持(VC6.0的编译器不支持).宏前面加上##的作用在于,当可变参数 ...
- 模拟出ios中流行的黑色背景底
[activityIndicatorView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:0.4]]; 用上面的语法,可以 ...
- 禁用IE缓存
HTTP消息报头包括普通报头.请求报头.响应报头.实体报头. 普通报头中的Cache-Control用于指定缓存指令,缓存指令是单向的(响应中出现的缓存指令在请求中未必会出现),且是独立的(一个消息的 ...
- 通过使用第三方开源jar包sigar.jar我们可以获得本地的信息
1.下载sigar.jar sigar官方主页 sigar-1.6.4.zip 2.按照主页上的说明解压包后将相应的文件copy到java路径.比如windows32位操作系统需要将lib中sigar ...
- 《JavaScript编程实战》
<JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
- [Linux] Systemd 入门教程：实战篇
reference : http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-part-two.html 上一篇文章,我介绍了 Systemd ...
- 如何设置nginx日志格式来查看负载分担结果
转载:http://www.cnblogs.com/LoveJulin/p/5082363.html nginx配置好负载分担后,测试的时候,如何查看负载分担情况:通过设置nginx日志显示: ng ...
- C++迭代器失效的几种情况总结
一.序列式容器(数组式容器) 对于序列式容器(如vector,deque),序列式容器就是数组式容器,删除当前的iterator会使后面所有元素的iterator都失效.这是因为vetor,deque ...
- 黑马day12 DbUtils的介绍
简单介绍: DbUtils为不喜欢hibernate框架的钟爱.它是线程安全的,不存在并发问题. 使用步骤: 1. QueryRunner runner=new QueryRunner(这里写数据源. ...