1

希望有人可以提供帮助。我最近完成了计算学位，其中一个模块是创建网站。我决定为我朋友的父母创建一个网站，这样一旦课程结束，我就会有一些我可以使用的东西。

无论如何，其中一页是画廊。它使用 javascript 在页面上随机散布图像。问题是我需要保留包含的图像，以便它们不会出现在我页面上的其他项目上（例如标题）。

我们没有在课程中学习 javascript，因为该模块已被替换，所以任何代码都是我在互联网上找到的......

HTML：

<div id="imageBlock" style="height:1300px; width:1000px;">
        <a href="img/DUDLEY.jpg" title="Dudley aged ??"><img src="img/DUDLEY.jpg" /></a>
<a href="img/puppies6.jpg"><img src="img/puppies6.jpg" alt="" /></a>
<a href="img/Ruben.jpg" title="Ruben aged ???"><img src="img/Ruben.jpg" /></a>
<a href="img/wendy.jpg" title="Wendy aged ??"><img src="img/wendy.jpg" /></a>
<a href="img/puppies4.jpg"><img src="img/puppies4.jpg" alt="" /></a>
<a href="img/puppies7.jpg"><img src="img/puppies7.jpg" alt="" /></a>
<a href="img/puppies2.jpg"><img src="img/puppies2.jpg" alt="" /></a>
<a href="img/brutus.jpg" title="Brutus aged ??"><img src="img/brutus.jpg" /></a>
<a href="img/puppies3.jpg"><img src="img/puppies3.jpg" alt="" /></a>
<a href="img/puppies5.jpg"><img src="img/puppies5.jpg" alt="" /></a>    
</div>

Javascript： 

$(document).ready(function(){
    var zindexnr = 1;
    var container = $('#imageBlock');
    $("img").draggable({
        containment: container,
        start: function(event, ui) {
            zindexnr++;
            var cssObj = { 'z-index' : zindexnr };
            $(this).css(cssObj);
        }
    });

$(function() {
        $('#imageBlock a').lightBox();
    });

//Report the X & Y co-ords
$('#imageBlock img').hover(function()
{
    thisX = $(this).css('left')
    thisY = $(this).css('top')

    $('#currentX span').text(thisX);
    $('#currentY span').text(thisY);

})

//Initialise everything
var screenX = 1000, screenY = 750;
var xPos = 0, yPos = 0;

var xCounter=0, yCounter = 0;

var incrementalDelay = 0;

var origImageWidth = 0, origImageHeight = 0
var newImageWidth = 0, newImageHeight = 0

var numImages = $('#imageBlock img').length;  //20

xDivAmount = screenX / numImages;  // 1000/20 = 50
yDivAmount = screenY / numImages;  // 800/20 = 40

//create the position arrays
var posXArray = new Array;
var posYArray = new Array;

//Pre-populate the array
for (i=0; i<numImages; i++) //20 loops
{
    posXArray[i] = xCounter;  //0 on 1st run
    xCounter += xDivAmount;   //+50

    posYArray[i] = yCounter;  //0 on 1st run
    yCounter += yDivAmount;   //+40
}

$('#imageBlock img').each(function(index)
{
    origImageWidth = $(this).width();  //get the full width and height of each image
    origImageHeight = $(this).height();

    percentMultiply = (Math.floor(Math.random()*4)+1)/10  //random percentage multiplier (up to 40%)

    //newImageWidth = Math.floor(origImageWidth * percentMultiply);   //calculate new sizes
    //newImageHeight = Math.floor(origImageHeight * percentMultiply);

    newImageWidth = Math.floor(origImageWidth * 0.6);   //hard code new sizes
    newImageHeight = Math.floor(origImageHeight * 0.6);

    $(this).css({'width':newImageWidth, 'height':newImageHeight})  //apply new calculated sizes


    rotation = Math.floor(Math.random()*30)-15+'deg'; //random rotation
    $(this).css('-webkit-transform' , 'rotate('+rotation+')'); //apply rotation
    $(this).css('-moz-transform' , 'rotate('+rotation+')');

    randX = Math.floor(Math.random()*posXArray.length)  //Create random num 1 - array length
    randY = Math.floor(Math.random()*posYArray.length)

    //Output the content of the array - purely for DEV reasons
    for (i=0; i<posXArray.length; i++)
    {
        xOut=posXArray[i]
        yOut=posYArray[i]
        console.log('X:['+i+'] '+xOut+' Y:['+i+'] '+yOut)
    }

    console.log('Array pos for X: '+randX)
    console.log('Array pos for Y: '+randY)

    xPos = posXArray[randX]; //position = value at random location
    yPos = posYArray[randY];

    console.log('X: '+xPos)
    console.log('Y: '+yPos)

    console.log('')

    //remove the array values for chosen position
    posXArray.splice(randX, 1)
    posYArray.splice(randY, 1)


    //animate to position
    $(this).delay(incrementalDelay).animate({'left':xPos,'top':yPos}, 2000)
    //$(this).animate({'left':xPos,'top':yPos}, 1200)

    incrementalDelay +=80  //increment time delay for each loop

})

});

$(window).load(function ()
{

});
4

0 回答 0