Блог

Главная - Вопросы по программированию - Качающаяся анимация изображения, нужна помощь в исправлении. Все еще ОТКРЫТ

Качающаяся анимация изображения, нужна помощь в исправлении. Все еще ОТКРЫТ

#javascript #html #css #image

#javascript #HTML #css #изображение

Вопрос:

Итак, у меня здесь есть этот JsFIDDLE, и он работает, единственная проблема в том, что мне нужен Javascript для работы, по какой-то причине мой сайт не обнаружит его как есть.

Вот что есть в скрипке.

HTML

 <div class="swing" style="background-color:#transparent;">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>

CSS

 .swing {
-webkit-perspective:300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.swing img {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-transform-origin: 50% 0%;
}

И Javascript

 $('.swing img').mouseenter(function(event)
{
var sign = event.currentTarget;
sign.rotationX = 0;
TweenMax.to(sign, 0.2, { rotationX:-20, ease:Power1.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"]});
TweenMax.to(sign, 0.4, { rotationX:8, ease:Power1.easeInOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.2 });
TweenMax.to(sign, 3, { rotationX:0, ease:Elastic.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.6 });
});
function onUpdate(tween)
{
var target = tween.target;
target.style.webkitTransform = target.style.transform = target.style.msTransform = target.style.MozTransform = 'rotateX(' (target.rotationX) 'deg)';
}

Комментарии:

1. Если вы опубликуете свой нерабочий раздел заголовка, мы сможем найти проблему

Ответ №1:

Вам нужна ссылка на скрипт jQuery. Вы можете получить его из размещенных в Google библиотек

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

Ответ №2:

Javascript должен дождаться завершения загрузки DOM, обернуть его в:

 $(function() {
  // code
});

Комментарии:

1. И я предполагаю, что вы ставите его в голову, как связаться с <script> and not raw code?

2. $(function() { // JS Link»> </script> });

3. Нет, внутри файла скрипта, который вы связываете, чтобы обернуть в него приведенный выше JS

4. Можете ли вы опубликовать свой раздел HEAD в своем вопросе. Трудно сказать, в чем проблема в противном случае