Ecshop js实现飞入购物车效果

<!----借用别人的代码-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="JS抛物线动画与购物车效果 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面 JS抛物线动画与购物车效果" />
<meta name="keywords" content="抛物线, 动画, javascript" />
<meta name="author" content="张鑫旭, zhangxixnu" />
<title>JS抛物线动画与购物车效果 » 张鑫旭-鑫空间-鑫生活</title>

<style>
body { overflow-x: hidden; }
img { vertical-align: bottom; }
.width_limit { width: 1194px; margin-left: auto; margin-right: auto; }
.image_limit { position: relative; }
.shop_cart { width: 283px; height: 25px; line-height: 25px; padding-top: 8px; background: url('http://www.zhangxinxu.com/study/201312/shopping-cart.png'); font-family: 'microsoft yahei'; font-size: 12px; text-indent: 34px; color: #000; position: fixed; right: 10px; bottom: 0; }
.add_cart_large, .add_cart_small { position: absolute; background: url(about:blank); text-indent: -99em; overflow: hidden; }
.add_cart_large { width: 167px; height: 33px; left: 724px; top: 511px; }
.add_cart_small { width: 82px; height: 25px; left: 1098px; top: 1014px; }

.fly_item { border: 2px solid #B30000; width: 50px; height: 50px; overflow: hidden; position: absolute; visibility: hidden; opacity: .5; filter: alpha(opacity=50); }
</style>
</head>

<body>
<div id="header">
    <a href="/" class="logo" title="回到鑫空间-鑫生活首页">
        <img src="http://www.zhangxinxu.com/php/image/zxx_home_logo.png" border="0" />
    </a>
</div>
<div id="main">
    <h1>JS抛物线动画与购物车效果实例页面</h1>
    <div id="body" class="light">
        <div id="content" class="show">
            <h3>展示</h3>
            <div class="article_new"><a href="#">回到相关文章 »</a></div>
            <div class="demo">
                <div class="width_limit">
                    <p>下面这个是截图，只有两个“加入购物车”按钮可以点击：</p>
                    <div class="image_limit">
                        <img src="http://image.zhangxinxu.com/image/blog/201412/2013-12-30_103800.png" width="1194" height="1051" alt="天猫某商品页面的部分截图" />
                        <a href="javascript:" class="add_cart_large btnCart" title="加入购物车" >加入购物车</a>
                        <a href="javascript:" class="add_cart_small btnCart" title="加入购物车" >加入购物车</a>
                       </div>
                </div>
               
            </div>
           
            
        </div>       
    </div>
</div>

 <div id="shopCart" class="shop_cart">购物车 <span>0</span></div>
                <div id="flyItem" class="fly_item"><img src="http://www.zhangxinxu.com/study/201312/item-pic.jpg" width="50" height="50" /></div>
                
<script src="http://www.zhangxinxu.com/study/201312/parabola.js"></script>
<script>
// 元素以及其他一些变量
var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");
var numberItem = 0;
// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
    speed: 400,
    curvature: 0.002,    
    complete: function() {
        eleFlyElement.style.visibility = "hidden";
        eleShopCart.querySelector("span").innerHTML = ++numberItem;
    }
});
// 绑定点击事件
if (eleFlyElement && eleShopCart) {
    [].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {
        button.addEventListener("click", function(event) {
            // 滚动大小
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;

            eleFlyElement.style.left = event.clientX + scrollLeft + "px";
            eleFlyElement.style.top = event.clientY + scrollTop + "px";
            eleFlyElement.style.visibility = "visible";
            
            // 需要重定位
            myParabola.position().move();            
        });
    });
}

</script>

如果需要循环的话，在后面加参数就行

但购物车一般是ajax，像ecshop是ajax.call方法，成功后执行js方法，所以上述操作是获取不了鼠标事件的，所以要做些修改；

//首先写个方法
function fly_cart(goods_id)
{    
    // 元素以及其他一些变量
var eleFlyElement = document.querySelector("#flyItem_"+goods_id), eleShopCart = document.querySelector("#shopCart");
// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
    speed: 200,
    curvature: 0.005,    
    complete: function() {
        eleFlyElement.style.visibility = "hidden";        
    }
});
//alert('btnCart_'+goods_id)
//alert(document.getElementsByClassName("btnCart_"+goods_id).length);
// 绑定点击事件
if (eleFlyElement && eleShopCart) {
//下面两行注释掉，是因为每次第一下都不能获取鼠标事件
//    [].slice.call(document.getElementsByClassName("btnCart_"+goods_id)).forEach(function(button) {
//        button.addEventListener("click", function(event) {                
            // 滚动大小
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;

            eleFlyElement.style.left = event.clientX + scrollLeft + "px";
            eleFlyElement.style.top = event.clientY + scrollTop + "px";
            eleFlyElement.style.visibility = "visible";
            
            // 需要重定位
            myParabola.position().move();            
    //    });
    //});
}
}

再在加入购物车成功的js方法里面添加上述方法即可

posted on 2017-11-16 15:18 limonyun 阅读(282) 评论(0) 编辑收藏举报