jQuery实现加入购物车飞入动画效果
<script src="jquery.js"></script>
<script src="jquery.fly.min.js"></script>
html
<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 class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
<div id="msg">已成功加入购物车!</div>
css
.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:500}
.box h4 span{font-size:20px}
.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;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:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
js
<script>
$(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, //开始位置(必填)#fly元素会被设置成position: fixed
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(); //移除dom
}
});
});
});
</script>
jQuery实现加入购物车飞入动画效果的更多相关文章
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 基于jQuery加入购物车飞入动画特效
基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main& ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show() <script type="text/javascript"> $(function() { ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- jQuery学习之旅 Item9 动画效果
1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...
- JQuery插件 aos.js-添加动画效果
原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...
- 【Demo】jQuery 轮播图简单动画效果
功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...
随机推荐
- 自定义view imageviw
新建一个类继承imageview package com.exaple.myselfview; import android.content.Context; import android.graph ...
- 批处理命令——choice
[1]choice命令简介 使用此命令可以提示用户输入一个选择项,根据用户输入的选择项再决定执行具体的过程. 使用时应该加/c:参数,c: 后应写提示可输入的字符或数字,之间无空格.冒号是可选项. 使 ...
- 什么是REST、RESTful
1.REST 指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful. 2.REST 原则是分层系统,这表示组件无法了解它与之交互的中间层以外的组件.通过将系统知识限 ...
- ajax 代码
function ajax(){ var aj=null; if(window.ActiveXObject){ aj = new ActiveXObject("Microsoft.XMLHT ...
- BooleanToVisibilityConverter.cs
//---------------------------------------------------------------------------- // // Copyright (C) M ...
- js替换字符串问题
利用正则表达式配合replace替换指定字符. 语法 stringObject.replace(regexp,replacement) 参数 描述 regexp 必需.规定了要替换的模式的 RegEx ...
- 【Spring】初始化Spring IoC容器(非Web应用),并获取Bean
参考文章 Introduction to the Spring IoC container and beans BeanFactory 和ApplicationContext(Bean工厂和应用上下文 ...
- C# Reportviewer 固定表头
RDLC报表固定每页都显示表头以XML方式打开rdlc文件查找到<TablixRowHierarchy> <TablixMembers> <TablixMember> ...
- 16.Linux配置环境变量和日志history和Terminal颜色和用户(IP)操作日志记录
$ vim /etc/profile #####################环境变量################################# export TZ='Asia/Shangh ...
- 《BI那点儿事》Cube的存储
关系 OLAP (ROLAP)ROLAP的基本数据和聚合数据均存放在关系数据库中:ROLAP 存储模式使得分区的聚合存储在关系数据库的表(在分区数据源中指定)中.但是,可为分区数据使用 ROLAP 存 ...