JS 图片缩放、显示全图、鼠标滑轮控制显示大小

来源：互联网发布：淘宝网邮箱注册编辑：程序博客网时间：2024/04/24 04:30

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<html>
<head>
<script type="text/javascript">
function resizeimg(ImgD, iwidth, iheight) {
var image = new Image();
image.src = document.getElementById(ImgD).src;
if (image.width > 0 && image.height > 0) {
  if (image.width / image.height >= iwidth / iheight) {
    if (image.width > iwidth) {
      document.getElementById(ImgD).width = iwidth;
      document.getElementById(ImgD).height = (image.height * iwidth)/ image.width;
    } 
    else {
      document.getElementById(ImgD).width = image.width;
      document.getElementById(ImgD).height = image.height;
    }
    document.getElementById(ImgD).alt = image.width + "×" + image.height;
  } 
  else {
    if (image.height > iheight) {
      document.getElementById(ImgD).height = iheight;
      document.getElementById(ImgD).width = (image.width * iheight)/ image.height;
    } else {
      document.getElementById(ImgD).width = image.width;
      document.getElementById(ImgD).height = image.height;
    }
    document.getElementById(ImgD).alt = image.width + "×" + image.height;
  }
  document.getElementById(ImgD).style.cursor = "pointer"; //改变鼠标指针
  document.getElementById(ImgD).onclick = function() {
  window.open(this.src);
}; //点击打开大图片
if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器，如果是IE
  document.getElementById(ImgD).title = "请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
  document.getElementById(ImgD).onmousewheel = function img_zoom() //滚轮缩放
  {
    var zoom = parseInt(this.style.zoom, 10) || 100;
    zoom += event.wheelDelta / 12;
    if (zoom > 0) this.style.zoom = zoom + "%";
    return false;
  };
} else { //如果不是IE
  document.getElementById(ImgD).title = "点击图片可在新窗口打开";
}
}
}
</script>
</head>
<body onload="resizeimg('testImg',780,500)">
<img src="xxx.jpg" id="testImg" />
</body>
</html>

0 0