点击飞入购物车效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击飞入购物车效果</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$(".run").click(function(){
var menID = $(this).attr("id");
var thisTop = $("#img_" + menID).offset().top; //所在位置的高度
var thisLeft = $("#img_" + menID).offset().left; //所在位置的宽度
animatenTop(thisTop,thisLeft);
return false;
});
});
function animatenTop(thisTop,thisLeft) {
var CopyDiv = '<img src="download.png" id="box" style="top:' + thisTop + 'px;left:' + thisLeft + 'px" />';
var topLength = $(".shopMenu li").offset().top; //取得到购物车的宽度
var leftLength = $(".shopMenu li").offset().left; //取得到购物车的宽度
$("body").append(CopyDiv);
$("body").children("#box").animate({width: "30px",height: "30px","top": topLength, "left": leftLength, "opacity": .1 }, 900, function(){$(this).remove()});
}
</script>
<style type="text/css">
body{
font-family: "宋体",Arial;
}
ul{
margin: 0;
padding: 0;
list-style:none;
}
.Listbox {
width:150px;
border:1px solid #ccc;
margin-left: 100px;
}
.Listbox li {
width:150px;
text-align: center;
}
.shopMenu {
border:1px solid #ccc;
width:150px;
margin-left: 500px;
text-align: center;
}
.shopMenu{
margin: 0;
padding: 0;
margin:200px 0 0 150px;
}
.shopMenu li{
text-align: center;
width: 150px;
height: 150px;
line-height: 150px;
}
#box {
height: 120px;
width: 126px;
position: absolute;
}
</style>
</head>
<body>
<ul class="Listbox">
<li>
<img src="pic.png" width="100" id="img_1" />
</li>
<li><a href="#" class="run" id="1">click me</a></li>
</ul>
<ul class="shopMenu">
<li>空盒</li>
</ul>
</body>
</html>