使用 jQuery 的图像动画

Posted 2023-05-08

技术标签:

【中文标题】使用 jQuery 的图像动画【英文标题】：Image Animation Using jQuery 【发布时间】：2013-09-06 09:06:08 【问题描述】：

我有 7 张图片要在我的 Joomla 网站上制作动画，我想给人一种印象，即它们从左侧进入并且全部停在页面中间，然后它们可以点击并转到单独的 url 菜单项目。

这可能吗，有人有一个脚本，我可以在其中调用图像。

我的意思是尽快学习 jQuery，但需要在网站上放置图像。

非常感谢任何帮助。

谢谢

迪尔

【问题讨论】：

【参考方案1】：

检查this 和this 站点。

这些链接包含最适合您要求的关键帧和 css 信息。选择你想要的任何效果。

Here你可以找到一些演示。

【讨论】：

感谢您的链接，我看到了关键帧代码，但是我在哪里添加我的图像以及如何在 index.php/css 文件中调用它们这行得通吗？函数 animateImage() console.log("Called"); $('#bee').css(right:'10%'); $('#bee').animate(right: '-100%', 5000, 'linear', function()animateImage();); $(document).ready(function() animateImage(); ); 我什么都没看到？如果我在 index.php 头中添加一个脚本并将图像输入到 index.php 的正文中，这是要走的路吗？谢谢你到底想完成什么？我想将几张图片添加到我的 index.php 中，这样它们就会一张一张地出现在页面上，然后全部停止。图片应该有链接，因此可以点击菜单项的每个网址。【参考方案2】：

这个可以用吗？这是一个开始吗？ jQuery 的图像路径是 Web 根目录中的什么路径？谢谢

<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>


</head>
<body>
     $(window).load(function()

    $("<div/>", 
      "id": "image",
      "css":  "display" : "block",
    ).appendTo("body");

    $("<img src='_ls-global/layout-images/image1.png'/>").appendTo("#image");
    $("<img src='_ls-global/layout-images/image2.png'/>").appendTo("#image");
    $("<img src='_ls-global/layout-images/image3.png'/>").appendTo("#image");
    $("<img src='_ls-global/layout-images/image4.png'/>").appendTo("#image");
    $("<img src='_ls-global/layout-images/image5.png'/>").appendTo("#image");

    );

</body>
</html>

【讨论】：

以上是关于使用 jQuery 的图像动画的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 的图像动画

如何使用 jQuery 动画更改背景图像？