jquery方法animate操作图片移动

最新推荐文章于 2022-09-28 15:15:11 发布

正在输入代码中

最新推荐文章于 2022-09-28 15:15:11 发布

阅读量2.9k

点赞数 1

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_26744901/article/details/49306309

版权

本文介绍了如何利用jQuery的animate方法制作图片飞入购物车的动态效果。通过将图片缩小并设置为半透明，然后改变其坐标，最终在达到目标位置时让图片消失，从而模拟出物品被加入购物车的视觉体验。

摘要由CSDN通过智能技术生成

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

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

<!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 () {