我正在为 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 代码模块的内容部分并使其正常工作。当我将这个 block 放入模块时，我看到了图像，并且格式正确，但动画已经死了。我知道 Jquery 工作正常，因为当我使用警报功能进行测试时它工作正常。
任何我出错的想法。我看了看，但无法在堆栈溢出上找到任何类似的东西。
谢谢大家!
最佳答案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
我发现上面的代码确实像发布的那样工作。但是，最新的 divi 主题似乎并未固有地包含当前版本的 Jquery。所以我只是把它放在上面发布的脚本上面，它就开始运行了。我注意到控制台中出现了一些错误，但一切正常。
它还可以直接将 jquery 嵌入到头部。我更喜欢这种方法。
关于javascript - 通过 Wordpress Divi 主题代码模块为图像内部的图像设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45808113/