通过 Wordpress Divi 主题代码模块为图像内部的图像设置动画

Question

我正在使用 wordpress 的 divi 主题，我已经选择了代码模块，我正在尝试获取一个网站的图片，以便在悬停时滚动并在悬停结束时反向滚动...因此返回图像回到其原始位置。网站前面有一张图片。基本上，这给人一种用户正在从计算机上向下滚动网页的感觉。这个想法最初是在 dividojo.com 发现的（好主意 dividojo！）https://www.dividojo.com/website-design/ 它位于页面底部。

我有完整的代码，可以在 wordpress 之外正常运行，代码如下。

<!DOCTYPE html>
<html>
<head>
<title>animatingimage</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#insideComputer").hover(function() {
            $("#insideComputer").stop(true).animate({
                marginTop:"-1210px"
                }, 5000);
        },
        function(){
            $("#insideComputer").stop(true).animate({
                marginTop:"0px"
                }, 5000);
        });

    });
</script>
</head>
<body>
<div id="bigDiv">
    <img id="computer" src="img/computer3.png">
    <div id="imgDiv">
        <img id="insideComputer" src="img/website1.png">
    </div>
</div>
</body>
</html>

这里是附加的外部 CSS。

#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}

就像我说的，上面的功能是正确的。我正在尝试将其输入到 divi 主题中。我已经将上面的代码修改为：

<style>
#bigDiv {
 background-color: #F5F5F5;
 width: 500px;
 height: 500px;
 margin: 200px;
}
#imgDiv{
 width: 463px;
 height: 269px;
 position: relative;
 top: -430px;
 left: 19px;
 overflow: hidden;
}
#insideComputer {
width: 100%;
}
</style>
<script type="text/javascript">
 $(document).ready(function(){
 $("#insideComputer").hover(function() {
 $("#insideComputer").stop(true).animate({
 marginTop:"-1210px"
 }, 5000);
 },
 function(){
 $("#insideComputer").stop(true).animate({
 marginTop:"0px"
 }, 5000);
 });

 });
 </script>
<div id="bigDiv">
 <img id="computer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/computer3.png">
 <div id="imgDiv">
 <img id="insideComputer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/website1.png">
 </div>
 </div>

根据我阅读的所有文档，我应该能够将其放入 divi 代码模块的内容部分并使其正常工作。当我将这个块放入模块时，我看到了图像，并且格式正确，但动画已经死了。我知道 Jquery 工作正常，因为当我使用警报功能进行测试时它工作正常。

任何我出错的想法。我看了看，但无法在堆栈溢出上找到任何类似的东西。

谢谢大家！

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我发现上面的代码确实和发布的一样有效。但是，Jquery 的当前版本似乎并没有包含在最新的 divi 主题中。所以我只是把它放在上面发布的脚本上面，它就开始运行了。我注意到控制台中出现了一些错误，但一切正常。

它还可以直接将 jquery 嵌入头部。我比较喜欢这个方法

通过 Wordpress Divi 主题代码模块为图像内部的图像设置动画

Animating an image inside of an image via Wordpress Divi Theme code module

javascript

wordpress

jquery

wordpress-theming

custom-wordpress-pages