Изображения случайно размещены на странице

Я пытаюсь получить много .gifs, чтобы появляться в случайных позициях на странице. Мне удалось получить первый, чтобы выполнить это действие, но по какой-то причине все те, которые приходят после, остаются статичными, несмотря на то, что у них одинаковый идентификатор. GIF также имеют функцию перетаскивания.Изображения случайно размещены на странице

Может ли кто-нибудь сказать мне, где я ошибся?

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css"> 
 
    <link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.10.3.custom.min.css"> 
 
    <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Cherry+Swash:400,700"> 
 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.js"></script> 
 
    <script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.10.3.custom.min.js"></script> 
 

 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title></title> 
 

 
    <style> 
 
    * { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    html { 
 
     font: 16px"Segoe UI", "Segoe WPC", Helvetica, Arial, "Arial Unicode MS", Sans-Serif; 
 
    } 
 
    } 
 
    #w {} 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="w"> 
 
    <center> 
 

 
     <img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image"> 
 
     <img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image"> 
 
     <img src="images/.gif" height="150" class="draggable ui-draggable" alt="paper" id="image"> 
 
    </div> 
 
    <script> 
 
    window.onLoad = Prep(); 
 

 
    function Prep() { 
 
     window_Height = window.innerHeight; 
 
     window_Width = window.innerWidth; 
 

 
     image_Element = document.getElementById("image"); 
 
     image_Height = image_Element.clientHeight; 
 
     image_Width = image_Element.clientWidth; 
 

 
     availSpace_V = window_Height - image_Height; 
 
     availSpace_H = window_Width - image_Width; 
 

 
     var changeInterval = 3000; // Time has to be in miliseconds. So, 3000 is 3 seconds 
 
     setInterval(moveImage, changeInterval); 
 
    } 
 

 
    function moveImage() { 
 
     var randNum_V = Math.round(Math.random() * availSpace_V); 
 
     var randNum_H = Math.round(Math.random() * availSpace_H); 
 

 
     image_Element.style.top = randNum_V + "px"; 
 
     image_Element.style.left = randNum_H + "px"; 
 
    } 
 
    </script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $('.draggable').draggable({ 
 
     scroll: true, 
 
     cursor: "move" 
 
     }); 
 
    }); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $('.draggable').draggable({ 
 
     scroll: true, 
 
     cursor: "move" 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-03-11 Casper Loomis

Вы должны использовать только id теги один раз. Используйте классы вместо этого, например:

<img src="images/.gif" height="150" class="draggable ui-draggable image" alt="paper">

image_Element = document.getElementsByClassName("image");

Вам необходимо внести другие изменения, как хорошо, но это должно дать вам общее представление.

источник

2016-03-11 11:26:12 Michael

Большое спасибо за наконечник. Однако ни один из .gifs не движется. –

Поскольку вы используете JQuery, вы могли бы сделать что-то вроде ..

window.onload = Prep(); 
var window_Height, window_Width; 
var changeInterval = 3000; 

function Prep(){ 
    window_Height = $(window).height(); 
    window_Width = $(window).width(); 
} 

function moveImage(imgEl,space_V,space_H){ 
    var randNum_V = Math.round(Math.random() * space_V); 
    var randNum_H = Math.round(Math.random() * space_H); 

    imgEl.style.top = randNum_V + "px"; 
    imgEl.style.left = randNum_H + "px"; 
} 

$('img').each(function(){ 
    var img = $(this); 
    var image_Height = img.height(); 
    var image_Width = img.width(); 
    var availSpace_V = window_Height - image_Height; 
    var availSpace_H = window_Width - image_Width; 

    setInterval(moveImage(img,availSpace_V,availspace_H),changeInterval); 
});

Я сократил свой Prep функцию, чтобы просто получить размеры окна и изменять ваш moveImage функцию, чтобы иметь необходимые переменные передаются в качестве аргументов. Таким образом, вы можете использовать функцию для каждого изображения отдельно.

JQuery .each цели каждый IMG элемент на странице и выполняет moveImage функцию соответственно. Если вы хотите получить более конкретными, а не ориентации всех элементов изображения, вы можете просто выбрать ту, в DIV с идентификатором ж делать что-то вроде ..

$('#w').find('img').each(function(){...

Надеются, что это помогает!

источник

2016-03-11 16:08:55 jarebones

Изображения случайно размещены на странице

ответ

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