模拟简单添加到购物车功能

最新推荐文章于 2021-10-13 20:40:36 发布

转载最新推荐文章于 2021-10-13 20:40:36 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxiaoyun/p/7815759.html

文章标签：

#java #javascript #ViewUI

本文介绍了一个使用CSS样式和jQuery实现的简单购物车动画效果案例。当点击页面上的元素时，该元素会以动画形式移动到固定位置的购物车图标内并逐渐消失。此示例展示了如何结合CSS定位及jQuery动画方法来实现网页上的动态效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" name="viewport">

<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
display: block;
width: 50px;
height: 50px;
background-color: #fa7d7d;
margin:10px;
line-height: 50px;
color: #fff;
text-align: center;
}
.car{
display: inline-block;
width: 60px;
height: 60px;
background-color: pink;
line-height: 60px;
text-align: center;
position: fixed;
top:40px;
right:20px;
}
</style>
</head>
<body>
<div class="con">
<ul class="c_ul">
<li class="box">aaa1</li>
<li class="box">aaa2</li>
<li class="box">aaa3</li>
<li class="box">aaa4</li>
<li class="box">aaa5</li>
</ul>
</div>
<div class="car" id="collectBox">
购物车
</div>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".box").click(function(event) {
var divTop = $(this).offset().top;
var divLeft = $(this).offset().left;
$(this).css({"position":"absolute","z-index":"500","left":divLeft+"px","top":divTop+"px"});
$(this).animate({"left":($("#collectBox").offset().left - $("#collectBox").width())+"px","top":($(document).scrollTop()+30)+"px"},500,function(){
$(this).animate({"left":$("#collectBox").offset().left +"px","top":$("#collectBox").offset().bottom+"px"},500).fadeTo(0,0.1).hide(0);
})
});
})
</script>
</body>
</html>