基于jQuery加入购物车飞入动画特效。这是一款电商购物网站常用的把商品加入购物车代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div id="main">
<div class="demo">
<div class="box">
<img src="data:images/lg.jpg" width="180" height="180">
<h4>
¥<span>3499.00</span></h4>
<p>
LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
<div class="box">
<img src="data:images/hs.jpg" width="180" height="180">
<h4>
¥<span>3799.00</span></h4>
<p>
Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
<div class="box">
<img src="data:images/cw.jpg" width="180" height="180">
<h4>
¥<span>¥3999.00</span></h4>
<p>
Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
<div class="box">
<img src="data:images/ls.jpg" width="180" height="180">
<h4>
¥<span>6969.00</span></h4>
<p>
乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
<a href="#" class="button orange addcar">加入购物车</a>
</div>
</div>
</div>
<div class="m-sidebar">
<div class="cart">
<i id="end"></i><span>购物车</span>
</div>
</div>
<div id="msg">
已成功加入购物车!</div>
</div>

css代码:

 .demo
{
width: 820px;
margin: 60px auto 10px auto;
} .m-sidebar
{
position: fixed;
top:;
right:;
background: #000;
z-index:;
width: 35px;
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: 0 auto;
}
.cart i
{
width: 35px;
height: 35px;
display: block;
background: url(car.png) no-repeat;
}
#msg
{
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;
} .box
{
float: left;
width: 198px;
height: 320px;
margin-left: 5px;
border: 1px solid #e0e0e0;
text-align: center;
}
.box p
{
line-height: 20px;
padding: 4px 4px 10px 4px;
text-align: left;
}
.box:hover
{
border: 1px solid #f90;
}
.box h4
{
line-height: 32px;
font-size: 14px;
color: #f30;
font-weight:;
}
.box h4 span
{
font-size: 20px;
}
.u-flyer
{
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-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');
}

js代码:

  $(function () {
var offset = $("#end").offset();
$(".addcar").click(function (event) {
var addcar = $(this);
var img = addcar.parent().find('img').attr('src');
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 () {
$("#msg").show().animate({ width: '250px' }, 200).fadeOut(1000);
addcar.css("cursor", "default").removeClass('orange').unbind('click');
this.destory();
}
});
}); });

via:http://www.w2bc.com/Article/29464

基于jQuery加入购物车飞入动画特效的更多相关文章

  1. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  2. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  3. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  4. 基于jQuery HTML5人物介绍卡片特效

    基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  5. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  6. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  7. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  8. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  9. 一款基于jQuery的超酷动画幻灯片

    今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...

随机推荐

  1. 2014年,daliu_it 年末文章汇总清单

    一.javabase 1. Windows环境下JDK安装与环境变量配置 详细的介绍了JDK的安装以及配图,同时安装的注意事项. 2. 项目的命名规范,为以后的程序开发中养成良好的行为习惯 详细的介绍 ...

  2. python3.x 和 python2.x关于 urllib的用法

    在python2.x版本中可以直接使用import urllib来进行操作,但是python3.x版本中使用的是import urllib.request来进行操作,下面是简单的例子: python2 ...

  3. Scala之Object (apply) dycopy

    一.前言 前面学习了Scala的Methods,接着学习Scala中的Object 二.Object Object在Scala有两种含义,在Java中,其代表一个类的实例,而在Scala中,其还是一个 ...

  4. 马老师 LNMP生产环境Web架构 笔记

    http协议和缓存原理.多路IO模型: MIME机制,Multipurpose Internet Mail Extensions,多用户互联网邮件扩展.MIME使用一个简单的字符串组成,最初是为了标识 ...

  5. android 添加桌面快捷方式

    .在桌面创建快捷方式方法: 方法一:通过长按某一个应用程序的图标在桌面上创建启动该应用程序的快捷方式. 这个方法安装完程序都用户都能实现. 方法二:在应用程序中构建一个Intent,然后以Broadc ...

  6. iOS - OC 与 C 互相操作

    前言 在 Objective-C 语言中,我们可以使用 C.Swift 语言编写代码,我们可以导入任意用 C.Swift 写的 Cocoa 平台框架.C 框架或 Swift 类库. 1.在 C 中使用 ...

  7. C# 获取当前打开的文件夹2

    这一个则比较投机,准确性不能保证,可以参考:   这个类获取当前进程的句柄:  public class MyProcess     {         private bool haveMainWi ...

  8. python学习笔记——multiprocessing 多进程模块Process

    系统自带的fork模块创建的多进程是基于Linux或Unix平台的,而window平台并不支持: python中的multiprocess为跨平台版本的多进程模块,支持子进程.通信和共享数据.执行不同 ...

  9. AP_建立银行信息总行、分行、账户(设定)

    2014-06-04 Created By BaoXinjian

  10. win7 64 python2 xgboost安装

    综述: 首先,关于xgboost是啥,可以看这一篇:机器学习(四)--- 从gbdt到xgboost 安装Python3 环境下的xgboost 可以通过pip install , 在网址中下载对应版 ...