使用 jQuery 的图像动画答案

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

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

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

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

非常感谢任何帮助。

谢谢

迪尔

【问题讨论】：

标签： jquery image jquery-animate

【解决方案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>

【讨论】：