Jsfiddle не работает над файлом

-2

У меня есть Fiddle http://jsfiddle.net/7owj48qt/, но я не могу заставить его работать вне Jsfiddle. Есть идеи?Jsfiddle не работает над файлом

HTML:

<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="600" height="40%" width="40%" /> 

<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="1000" height="40%" width="40%" />

SCRIPT:

$('img').each(function() { 
    var deg = $(this).data('rotate') || 0; 
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
    $(this).css({ 
     '-webkit-transform': rotate, 
      '-moz-transform': rotate, 
      '-o-transform': rotate, 
      '-ms-transform': rotate, 
      'transform': rotate 
    }); 
});

источник

2015-03-02 jal_est

какая ошибка вы получаете –

вы указали ссылку 'javascript' в' html'? –

Для этого есть две довольно вероятные, но совершенно разные причины, но никоим образом не диагностировать, не видя больше кода или зная, какие ошибки сообщаются на консоли JS. – Quentin

<script type="text/JavaScript"> 

$(document).ready(function(){ 
    $('img').each(function() { 
     var deg = $(this).data('rotate') || 0; 
     var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
     $(this).css({ 
      '-webkit-transform': rotate, 
       '-moz-transform': rotate, 
       '-o-transform': rotate, 
       '-ms-transform': rotate, 
       'transform': rotate 
     }); 
    }); 
}); 

</script>

источник

2015-03-02 11:56:58

Вызов вашей функции после загрузки изображения. Для этого используйте jquery onload.

$("img").load(function() { 
    var deg = $(this).data('rotate') || 0; 
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
    $(this).css({ 
     '-webkit-transform': rotate, 
      '-moz-transform': rotate, 
      '-o-transform': rotate, 
      '-ms-transform': rotate, 
      'transform': rotate 
    }); 
});

Событие нагрузки отправляется элементу, когда он и все подэлементы были полностью загружены. Это событие может быть отправлено на любой элемент, связанный с URL: изображения, скрипты, фреймы, фреймы, и объект окна

источник

2015-03-02 12:02:26 Rudra

использовать это:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js" ></script> 

<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="600" height="40%" width="40%" /> 

<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="1000" height="40%" width="40%" /> 



<script> 
$(window).on("load", function(){ 
$('img').each(function() { 
    var deg = $(this).data('rotate') || 0; 
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
    $(this).css({ 
     '-webkit-transform': rotate, 
      '-moz-transform': rotate, 
      '-o-transform': rotate, 
      '-ms-transform': rotate, 
      'transform': rotate 
    }); 
}); 
}); 
</script>

источник

2015-03-02 12:04:03 jems

Вы добавили jQuery-2.1.3.min.js в свой код – jems

Как всегда, после размещения найденной ошибки. я имел:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min"></script>

.js отсутствует. Спасибо за быстрые ответы.

Этот продукт работает.

<html> 
<head> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/JavaScript"> 

$(document).ready(function(){ 
    $('img').each(function() { 
     var deg = $(this).data('rotate') || 0; 
     var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
     $(this).css({ 
      '-webkit-transform': rotate, 
       '-moz-transform': rotate, 
       '-o-transform': rotate, 
       '-ms-transform': rotate, 
       'transform': rotate 
     }); 
    }); 
}); 

</script> 
</head> 
<body> 

<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="200" height="40%" width="40%" /> 
<img id="preload1" style="transition: all 2400ms;" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/wheel.png" data-rotate="-200" height="40%" width="40%" /> 

</body> 
</html>

источник

2015-03-02 12:09:07

Jsfiddle не работает над файлом

ответ

Смежные вопросы