利用javascript实现图片动态的放大和缩小

来源：互联网发布：淘宝店铺简介在哪里设编辑：程序博客网时间：2024/04/27 18:25

在网站经常用到缩略图,但一般情况下是不能改变大小的.文本实现了这么一个效果, 当你鼠标移到缩略图上时, 缩略图动态的放大到设定的大小,鼠标移开时,动态的恢复到缩略图的大小.主要是通过javascript实现.适当的应用可以增强用户体验.
文章原始链接:http://www.codeproject.com/useritems/Expanding_Image_Animator.asp

javascript代码如下:

// Thumbnail expansion and reduction animation
//use expandthumb(142, 500, 449) to increase and
//reducethumb(142) to decrease the thumbnail
//142 represents the name of the thumbimage.. it should be like thumb142
// for reduceimage
// and the expanded image id will be screen142 for the value 142 in
//expandimage
//500 and 449 are the enlarges size of the image

// Thumbnail expansion and reduction animation
//use expandthumb(

expandingid = 0;
expandingstep = 0;//放缩图片的当前步骤数
expandingwidth = 0;
expandingheight = 0;
expandingtop = 0;//图片的相对top
expandingleft = 0;//图片的相对left
expandingtimeout = 0;//定时器的标识
expandingtotalsteps = 15;//放缩图片时的步骤次数

function expandthumb(thumbid, fullwidth, fullheight) {
  if (expandingtimeout != 0) {
    clearTimeout(expandingtimeout);
  }
  if (expandingid > 0 && expandingid != thumbid) {
    restorethumb();
  }
  if (expandingid != thumbid) {
    img = document.getElementById("screen" + thumbid);
    img.style.display = 'block';
    expandingid = thumbid;
    expandingstep = 1;
    expandingwidth = fullwidth;
    expandingheight = fullheight;
    expandingtop = img.offsetTop;
    expandingleft = img.offsetLeft;
  } else if (expandingstep < 1) {
    expandingstep = 1;
  }
  expandstep();
}

function doexpand() {
  img = document.getElementById("screen" + expandingid);
  thumb = document.getElementById("thumb" + expandingid);
  myscroll = getScroll();
  if (expandingtop + thumb.height > myscroll.top + myscroll.height) {
    finaltop = myscroll.top + myscroll.height - expandingheight;
  } else {
    finaltop = expandingtop + thumb.height - expandingheight;
  }
  if (finaltop < myscroll.top) { finaltop = myscroll.top; }
  img.style.top = finaltop + ((expandingtop - finaltop) *
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';

  if (expandingleft + thumb.width > myscroll.left + myscroll.width) {
    finalleft = myscroll.left + myscroll.width - expandingwidth;
  } else {
    finalleft = expandingleft + thumb.width - expandingwidth;
  }
  if (finalleft < myscroll.left) { finalleft = myscroll.left; }
  img.style.left = finalleft + ((expandingleft - finalleft) *
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';

  img.width = thumb.width + ((expandingwidth - thumb.width) *
expandingstep / expandingtotalsteps);
  img.height = thumb.height + ((expandingheight - thumb.height) *
expandingstep / expandingtotalsteps);
}

function restorethumb() {
  img = document.getElementById("screen" + expandingid);
  img.style.top = '';
  img.style.left = '';
  img.style.display = 'none';
  expandingid = 0;
}

function expandstep() {
  expandingtimeout = 0;
  doexpand();
  if (expandingstep < expandingtotalsteps) {
    expandingstep++;
    expandingtimeout = setTimeout("expandstep()", 20);
  }
}

function reducestep() {
  expandingtimeout = 0;
  doexpand();
  if (expandingstep > 0) {
    expandingstep--;
    expandingtimeout = setTimeout("reducestep()", 20);
  } else {
    restorethumb();
  }
}

function reducethumb(thumbid) {
  if (expandingtimeout != 0) {
    clearTimeout(expandingtimeout);
  }
  if (expandingstep > 0) {
    reducestep();
  }
}

// returns the scroll position and size of the browser
function getScroll() {
  if (document.all && typeof document.body.scrollTop != "undefined") {
    // IE model
    var ieBox = document.compatMode != "CSS1Compat";
    var cont = ieBox ? document.body : document.documentElement;
    return {
      left:   cont.scrollLeft,
      top:    cont.scrollTop,
      width:  cont.clientWidth,
      height: cont.clientHeight
    };
  } else {
    return {
      left:   window.pageXOffset,
      top:    window.pageYOffset,
      width:  window.innerWidth,
      height: window.innerHeight
    };
  }
}

在html