html中图片点击效果代码

HTML中的图片点击效果是网页设计中非常常见的一种效果，以下是一个简单的示例代码：

点击图片时弹出新窗口

<a href="img/lake.jpg" target="_blank">
  <img src="img/lake.jpg">
</a>

上面的代码中，使用了<a>标签包裹<img>标签，来实现图片的点击效果。其中，href属性指定了图片链接的地址，target="_blank"属性表示在新窗口中打开图片。如果想要在当前窗口中打开图片，可以将target属性设置为"_self"，如下所示：

html中图片点击效果代码

在当前窗口中打开图片

<a href="img/lake.jpg" target="_self">
  <img src="img/lake.jpg">
</a>

除了在点击图片时打开窗口，还可以实现图片的放大效果。以下是一个实现图片放大效果的示例代码：

点击图片实现放大效果

<a href="javascript:void(0)" onclick="enlargeImg('img/lake.jpg')">
  <img src="img/lake.jpg">
</a>

<script>
function enlargeImg(imgSrc) {
  var img = new Image();
  img.src = imgSrc;
  var imgWidth = img.width;
  var imgHeight = img.height;
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var maxWidth = windowWidth * 0.8;
  var maxHeight = windowHeight * 0.8;
  if (imgWidth > maxWidth) {
    imgHeight = imgHeight * (maxWidth / imgWidth);
    imgWidth = maxWidth;
  }
  if (imgHeight > maxHeight) {
    imgWidth = imgWidth * (maxHeight / imgHeight);
    imgHeight = maxHeight;
  }
  var leftPos = (windowWidth - imgWidth) / 2;
  var topPos = (windowHeight - imgHeight) / 2;
  var win = window.open("","Image","width=" + imgWidth + ",height=" + imgHeight);
  win.document.write("<html><body><img src='" + imgSrc + "' style='position:absolute;left:" + leftPos + "px;top:" + topPos + "px;width:" + imgWidth + "px;height:" + imgHeight + "px;' /></body></html>");
}
</script>

上面的代码中，使用了javascript来实现点击图片后弹出新窗口，并在其中显示放大后的图片。在点击事件中，调用了enlargeImg函数，并将图片路径作为参数传入。 enlargeImg函数中，首先创建一个新的Image对象，获取到图片的原始宽高。然后，获取当前窗口的宽高，并定义放大后的最大宽高。接着，判断图片的宽高是否大于最大宽高，如果是，则按比例缩放图片的大小。最后，计算图片放大后居中显示的位置，并使用window.open打开新窗口。在新窗口中使用document.write输出 HTML代码，将图片以指定的宽高和位置显示。在实际开发中，可以根据需要使用不同的代码来实现图片点击效果，例如使用CSS实现鼠标悬停效果、使用jQuery库实现图片轮播等。代码的变化也可能带来不同的交互效果和用户体验，需要根据实际情况和设计要求进行选择和调整。

html中图片点击效果代码

相关推荐