Question

我正在使用wordi的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主题代码模块为图像内部的图像设置动画

1 个答案: