用href链接弹跳图像

时间:2013-06-16 14:30:52

标签: javascript

我找到了我想要使用的脚本,但无法解决如何将href添加到图像中。

LOCATION OF SCRIPT

或者,如果有人有更好的方法或解决方案 我认为通过div标签选择图像的方法是一种好方法,但是如何?

  

编辑:
  根据未来的请求,这里是代码

     

BounceImage.js

// INITIALIZATION:

imagesDetails = new Array();
bouncingImages2 = new Object();

// CONFIGURATION:

imagesDetails[0] = new Object();
imagesDetails[0].width = 50;
imagesDetails[0].height = 50;
imagesDetails[0].src = 'logo1xMINI.jpg';

imagesDetails[1] = new Object();
imagesDetails[1].width = 40;
imagesDetails[1].height = 40;
imagesDetails[1].src = 'superball.gif';

imagesDetails[2] = new Object();
imagesDetails[2].width = 60;
imagesDetails[2].height = 50;
imagesDetails[2].src = "1.png";

// Template for further images:

   // imagesDetails[3] = new Object();
   // imagesDetails[3].width = ?;
   // imagesDetails[3].height = ?;
   // imagesDetails[3].src = '?';

bouncingImages2.frameRate = 30;
bouncingImages2.minRandomSpeed = 2;
bouncingImages2.maxRandomSpeed = 8;

// MAIN:

bouncingImages2.isLoaded = false;

var winWidth, winHeight;

if (dyn) {
   for (var imageLoop = 0; imageLoop < imagesDetails.length; imageLoop++) imagesDetails[imageLoop].imgObj = loadImg(imagesDetails[imageLoop].src); 
   }

function getWindowDimensions() {
   winWidth = getWinWidth();
   winHeight = getWinHeight();
   }

function loadBouncingImages2() {
   if (dyn && !bouncingImages2.isLoaded) {
      getWindowDimensions();
      for (var layerLoop = 0; layerLoop < imagesDetails.length; layerLoop++) {
         imagesDetails[layerLoop].dirX = (Math.round(Math.random()) == 0) ? 'left' : 'right';
         imagesDetails[layerLoop].dirY = (Math.round(Math.random()) == 0) ? 'up' : 'down';
         imagesDetails[layerLoop].posX = Math.floor(Math.random() * (winWidth - imagesDetails[layerLoop].width - 1)) + getDocScrollLeft();
         imagesDetails[layerLoop].posY = Math.floor(Math.random() * (winHeight - imagesDetails[layerLoop].height - 1)) + getDocScrollTop();
         imagesDetails[layerLoop].speedX = Math.round(Math.random() * (bouncingImages2.maxRandomSpeed - bouncingImages2.minRandomSpeed)) + bouncingImages2.minRandomSpeed;
         imagesDetails[layerLoop].speedY = Math.round(Math.random() * (bouncingImages2.maxRandomSpeed - bouncingImages2.minRandomSpeed)) + bouncingImages2.minRandomSpeed;
         imagesDetails[layerLoop].layerObj = addLayer('bouncingImagesLyr' + layerLoop);
         setLayerSize(imagesDetails[layerLoop].layerObj,imagesDetails[layerLoop].width,imagesDetails[layerLoop].height);
         setLayerClip(imagesDetails[layerLoop].layerObj,0,imagesDetails[layerLoop].width,imagesDetails[layerLoop].height,0);
         setLayerHTML(imagesDetails[layerLoop].layerObj,getImgTag('bouncingImagesImg' + layerLoop,imagesDetails[layerLoop].src,imagesDetails[layerLoop].width,imagesDetails[layerLoop].height,0));
         moveLayerTo(imagesDetails[layerLoop].layerObj,imagesDetails[layerLoop].posX,imagesDetails[layerLoop].posY);
         showLayer(imagesDetails[layerLoop].layerObj);
         }
      bouncingImages2.isLoaded = true;
      moveBouncingImages();
      }
   }

function moveBouncingImages() {
   for (var layerLoop = 0; layerLoop < imagesDetails.length; layerLoop++) {
      if (imagesDetails[layerLoop].dirX == 'left') {
         if (imagesDetails[layerLoop].posX > imagesDetails[layerLoop].speedX) imagesDetails[layerLoop].posX -= imagesDetails[layerLoop].speedX;
         else {
            imagesDetails[layerLoop].dirX = 'right';
            imagesDetails[layerLoop].posX = 0;
            }
         }
      else if (imagesDetails[layerLoop].dirX == 'right') {
         if (imagesDetails[layerLoop].posX + imagesDetails[layerLoop].width < winWidth - imagesDetails[layerLoop].speedX) imagesDetails[layerLoop].posX += imagesDetails[layerLoop].speedX;
         else {
            imagesDetails[layerLoop].dirX = 'left';
            imagesDetails[layerLoop].posX = winWidth - imagesDetails[layerLoop].width;
            }
         }
      if (imagesDetails[layerLoop].dirY == 'up') {
         if (imagesDetails[layerLoop].posY > imagesDetails[layerLoop].speedY) imagesDetails[layerLoop].posY -= imagesDetails[layerLoop].speedY;
         else {
            imagesDetails[layerLoop].dirY = 'down';
            imagesDetails[layerLoop].posY = 0;
            }
         }
      else if (imagesDetails[layerLoop].dirY == 'down') {
         if (imagesDetails[layerLoop].posY + imagesDetails[layerLoop].height < winHeight -     imagesDetails[layerLoop].speedY) imagesDetails[layerLoop].posY += imagesDetails[layerLoop].speedY;
         else {
            imagesDetails[layerLoop].dirY = 'up';
            imagesDetails[layerLoop].posY = winHeight - imagesDetails[layerLoop].height;
            }
         }
      }
   for (var layerLoop = 0; layerLoop < imagesDetails.length; layerLoop++) moveLayerTo(imagesDetails    [layerLoop].layerObj,imagesDetails[layerLoop].posX + getDocScrollLeft(),imagesDetails    [layerLoop].posY + getDocScrollTop());
   window.setTimeout('moveBouncingImages()',bouncingImages2.frameRate);
   }

window.onresize = getWindowDimensions;
window.onload = loadBouncingImages2;
  

lib.js对于这里来说太长了

在正文标记

<body onLoad="javascript:loadBouncingImages2();">

2 个答案:

答案 0 :(得分:1)

看起来像一个琐碎的旧的突兀脚本。

一般解决方案

在函数loadBouncingImages2()中找到调用setLayerHTML()的位置,并将其第二个参数更改为您需要的任何HTML字符串。

可以改为'<a href="...">'+getImgTag(...)+'</a>'

通用解决方案

将setLayerHTML调用替换为

var img = getImgTag('bouncingImagesImg' + layerLoop,imagesDetails[layerLoop].src,imagesDetails[layerLoop].width,imagesDetails[layerLoop].height,0);
setLayerHTML(imagesDetails[layerLoop].layerObj,'<a href="'+imagesDetails[layerLoop].href+'">'+img+'</a>');

之后,只需通过向imageDetails添加href来修改配置,例如

imagesDetails[0].href = 'http://www.google.com';

答案 1 :(得分:0)

所有图片的容器id都以bouncingImagesLyr开头,图片name属性以bouncingImagesImg开头 - 您可以使用以下任何信息获取它们然后将类添加到它们。