Jquery商品飞入购物车动画效果实例展示

简介: 刚接手一个小玩意,值得收藏分享给大家!《产品图片飞入购物车的jQuery动画》无标题文档*{ margin:0; padding:0;}.good-area{ width:200px; position:absolute; left:100px; top:50px;}.

刚接手一个小玩意,值得收藏分享给大家!


《产品图片飞入购物车的jQuery动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.good-area{ width:200px; position:absolute; left:100px; top:50px;}
.good{ width:200px; height:180px; background:#ccc;}
.good img{ width:100%; height:100%;}
.shop_car{ width:100px; height:30px; line-height:30px; text-align:center; position:absolute; left:1000px; top:300px; background:#eee; color:red;}
#add_shopcar{ height:20px; line-height:20px; text-align:center; color:#03F; background:#F90;}
</style>
</head>
<body>
<div class="good-area">
    <div class="good"><img src="http://www.dreamjser.com/images/good.jpg" /></div>
    <div class="add_shopcar">加入购物车</div>
</div>
<div class="shop_car" id="shop_car">我是购物车</div>
<script type="text/javascript" src="http://www.dreamjser.com/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
(function(){
    var shop_car=$('#shop_car'),
        carLeft=shop_car.offset().left,
        carTop=shop_car.offset().top;
              
    /**
    *为所有购买按钮增加动画效果
    **/
    $('.add_shopcar').click(function(){
        var good=$(this).parent().find('.good'),
        goodLeft=good.offset().left,
        goodTop=good.offset().top;
                  
        if(good.is(':animated')){
            return;
        }
        var copyGood=good.clone();
                  
        $('body').append(copyGood);
        copyGood.css({position:'absolute',left:goodLeft,top:goodTop,border:'5px #f00 solid'});
        copyGood.animate({width:80,height:80,left:carLeft,top:carTop,opacity:1},800,function(){
            copyGood.remove();
        });
    });
})();
</script>
</body>
</html>


目录
相关文章
|
4天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
41 22
|
20天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
41 9
|
3月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
116 55
|
20天前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
29 0
|
2月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
27 1
|
3月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
17 1
|
4月前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
20 3
|
4月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
29 4
|
4月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
37 4
|
4月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
53 11