Я использую тему divi для wordpress, я выбрал модуль кода и пытаюсь получить изображение веб-сайта для прокрутки при наведении курсора и для обратной прокрутки, когда наведение заканчивается... поэтому возвращаю изображение обратно к исходному место нахождения. Перед веб-сайтом есть изображение. В основном это создает впечатление, что пользователь прокручивает веб-страницу с компьютера. Первоначально эта идея была обнаружена на сайте 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 работает правильно, потому что когда я тестирую функцию оповещения, она работает нормально.
Любые идеи, где я ошибся. Я посмотрел, но не смог найти ничего похожего на переполнение стека.
Спасибо ребята!
