js+css3购物车商品飞入动画特效-站长技术网

js+css3购物车商品飞入动画特效

时间:2019-11-15 11:31:05 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： CSS3 源码大小： 17 KB
普通会员
点击下载

js+css3实现的简单购物车商品飞入动画特效，点击“加入购物车”按钮，商品图片旋转着飞入购物车内。
js+css3购物车商品飞入动画特效

js代码
<script src="js/goodsFly.js"></script>
    <script type="text/javascript">
        var goods = document.querySelectorAll('.joinCar')
        goods.forEach(function(good, index) {
            good.addEventListener('click', function() {
                var imgUrl = this.parentNode.parentNode.getElementsByTagName('img')[0].src
                /*
                 * 参数说明：
                 * this: 当前点击的对象，此参数为原生js获取的对象，如示例，jquery慎用
                 * 'goodsCar'为你的购物车标签的class名称
                 * imgUrl: 当前点击商品的封面图片路径，若不传则为默认标签
                 */
                GoodsFly(this, 'goodsCar', imgUrl)
            })
        })

</script>