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

来源:https://www.sucaihuo.com/js/4665.html 2019-08-21 11:41浏览(135) 收藏

js+css3实现的简单购物车商品飞入动画特效,点击“加入购物车”按钮,商品图片旋转着飞入购物车内。
js+css3购物车商品飞入动画特效
分类:css3 > transform 难易:初级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 5 下载资源 下载积分: 30 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

1 2