您的位置：首页 > Web前端 > JQuery

jquery方法animate操作图片移动

2015-10-21 16:29 701 查看

在很多商城上看到有加入购物车然后图片飞入购物车的效果，于是尝试做了一下

原理：把图片生成一张小的图片半透明,然后给小图片新的坐标，当小图片到新的坐标就消失，效果如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.min.js"></script>
<script>
$(function () {
//给所有图片注册点击事件
$("img").click(function () {
var cart = $('.shopping-cart');//获取要移动到的目标
var imgtodrag = $(this);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
}).css({//生成一张小的图片
'opacity': '0.5',
'position': 'absolute',
'height': '80px',
'width': '80px',
'z-index': '100'
}).appendTo($('body')).animate({//对生成小的图片开始移动时间为1s
'top': cart.offset().top - 160,
'left': cart.offset().left + 60,
'width': 75,
'height': 75
}, 700).animate({//移动到目标区域图片消失
'width': 0,
'height': 0
}, function () {
$("#img").attr("src", $(imgtodrag).attr('src'));
});
}
})
});
</script>
</head>
<body>
<img src="《GJ部》_2015_05_23_22_15_20_1.jpg" />
<img src="《GJ部》_2015_05_23_22_15_20_1.jpg" />
<img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" />
<div style="text-align: center; margin-top: 300px">
<span class="shopping-cart">
<img src="#" style="width: 200px; height: 200px" id="img" />

</span>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航