Jquery购物车抛物线效果

最新推荐文章于 2023-02-14 10:22:12 发布

blog_liuliang

最新推荐文章于 2023-02-14 10:22:12 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery dom css 购物车抛物线效果

本文链接：https://blog.youkuaiyun.com/blog_liuliang/article/details/51161432

学习同时被 3 个专栏收录

29 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文介绍了一种使用Jquery插件实现的购物车抛物线效果。通过点击按钮触发商品图片飞入购物车的动画，增加了用户体验。示例中详细展示了如何引入所需的Jquery和插件，并提供了一个具体的应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jquery购物车抛物线效果

最近被论文搞得焦头烂额。好久没来逛了。之前做设计的时候发现一个抛物线效果，挺简单的也蛮好用。今天拿来分享一下。主要用到Jquery里的fly插件和event.page事件。在此之前，先要引用两个JS文件。

<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script>

然后，当当当，重要的function来啦。

<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>

有了它之后，你只需要通过点击触发button事件后即可实现图片满屏飞的效果啦。是不是很简单。

具体的例子来一个。

<!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,购物车" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<link rel="stylesheet" type="text/css" href="../css/main.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: 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}

.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;}

.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');
}
</style>

<!--[if lte IE 9]>
<script src="requestAnimationFrame.js"></script>
<![endif]-->

</head>

<body>
	
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-294.html">jQuery实现加入购物车飞入动画效果</a></h2>
	<div class="demo">
		<div class="box">
			<img src="images/lg.jpg" width="180" height="180">
			<h4>¥<span>3499.00</span></h4>
			<p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p>
			<a href="#" class="addcar">加入购物车</a>
		</div>
		<div class="box">
			<img src="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="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="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>
</body>
</html>

今天就到这里吧。就到这里啦。