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>
#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>
知道我哪里出错了吗。我查看了一下,但在堆栈溢出上找不到任何类似的内容。
谢谢大家!
