商品飞入购物车特效

时间：2017-03-31 00:10:47 阅读：184 评论：0 收藏：0 [点我收藏+]

标签：sha padding ping boot span button set attribute body

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>购物车特效</title>
	<script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
	<style type="text/css">
	*{
	margin:0px;
	padding:0px;
	border:0px;
	}
	#container{
	width:1000px;
	height:600px;
	border:1px solid gray;
	position:relative;
	padding:10px;

	}
	.shangpin{
	width:230px;
	height:auto;
	border:1px solid aquamarine;
	text-align: center;
	float: left;
	margin:0px 20px 20px 0px;
	}
	.shangpin button{
	background: lightblue;
	cursor:pointer;
	height:20px;
	width:100px;
	}
	.clearflo{
	clear:both;
	}
	#shopingcar{
	width:100px;
	height:50px;
	border:1px solid red;
	position:absolute;
	top:0px;
	right:0px;
	background:gray;
	color:red;
	}
	#shopingcar img{
	width:50px;
	height:50px;
	}
	#shopingcar .num{
	position:absolute;
	top:2px;
	left:15px;
	}
	</style>
	<script type="text/javascript">
	$(function(){
	var carnum=0;
	$(".shangpin button").on("click",function(){
	var shopcar=$("#shopingcar");

	var img=$(this).parents(".shangpin").find("img");
	var cloneimg=img.clone();
	cloneimg.css({
	"width":"230px",
	"height":"230px",
	"opacity":"0.5",
	"position":"absolute",
	"top":img.offset().top,
	"left":img.offset().left,
	"z-index":"1111"
	}).appendTo($("body")).animate({
	"width":"50px",
	"height":"50px",
	"top":shopcar.offset().top,
	"left":shopcar.offset().left
	},2000,function(){
	cloneimg.animate({
	"width":"0",
	"height":"0"
	},function(){
	$("#shopingcar .num").html(++carnum)
	$(this).detach()
	})

	})


	})
	})
	</script>
	</head>
	<body>
	<div id="container">
	<div class="shangpin">
	<img src="img/1.jpg" id="img" />
	<p class="price"> price:15.55 </p>
	<button>加入购物车</button>
	</div>
	<div class="shangpin">
	<img src="img/2.jpg" id="img" />
	<p class="price">price:</p>
	<button>加入购物车</button>
	</div>
	<div class="shangpin">
	<img src="img/3.jpg" id="img" />
	<p class="price">price:</p>
	<button>加入购物车</button>
	</div>
	<div class="shangpin">
	<img src="img/4.jpg" id="img" />
	<p class="price">price:</p>
	<button>加入购物车</button>
	</div>
	<div class="shangpin">
	<img src="img/5.jpg" id="img" />
	<p class="price">price:</p>
	<button>加入购物车</button>
	</div><div class="shangpin">
	<img src="img/6.jpg" id="img" />
	<p class="price">price:</p>
	<button>加入购物车</button>
	</div>
	<div class="clearflo"></div>
	<div id="shopingcar">
	<img src="img/car.png" />
	<p class="num">0</p>
	</div>
	</div>
	</body>
	</html>

技术分享

商品飞入购物车特效

标签：sha padding ping boot span button set attribute body

原文地址：http://www.cnblogs.com/huangshikun/p/6649265.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行