网页图片按比例显示缩略图的Javascript解决方法

<script language="javascript">

function init()
{
RsizeAllImageById("imgProductItem", 150, 150);
}

//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
   if(imgs[i].id == id)
   {
    ResizeImage(imgs[i], W, H);
   }
}
}

function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
    //比较纵横比
    if(image.width/image.height >= W/H)//相对显示框:宽>高
    {
     if(image.width > W) //宽度大于显示框宽度W,应压缩高度
     {
               imageDest.width = W;
               imageDest.height = (image.height*W)/image.width;  
              }
     else //宽度少于或等于显示框宽度W,图片完全显示
     {
               imageDest.width = image.width;      
               imageDest.height = image.height;  
              }
    }
    else//同理
    {
     if(image.height > H)
     {
               imageDest.height = H;
               imageDest.width = (image.width*H)/image.height;
              }
     else
     {
               imageDest.width = image.width;
               imageDest.height = image.height;
              }
    }
}
}
</script>

调用<BODY οnlοad="javascript:init();">

 

<img style="cursor:pointer" height="150" width="150" id="imgProductItem" name="imgProductItem">

 

转载于:https://www.cnblogs.com/wangqi/archive/2009/07/07/1518268.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!感谢您的提问。实现图片切换效果,可以使用JavaScript和CSS来实现。具体实现步骤如下: 1. HTML结构 首先,需要在HTML中创建一个容器,用于显示图片缩略图。例如: ```html <div class="image-container"> <img src="image1.jpg" alt="Image 1" class="main-image"> <div class="thumbnails"> <img src="thumb1.jpg" alt="Thumbnail 1"> <img src="thumb2.jpg" alt="Thumbnail 2"> <img src="thumb3.jpg" alt="Thumbnail 3"> </div> </div> ``` 其中,`.main-image`类用于显示图片,`.thumbnails`类用于包含缩略图。 2. CSS样式 接下来,需要定义CSS样式,用于控制图片缩略图显示效果。例如: ```css .image-container { position: relative; } .main-image { width: 100%; height: auto; } .thumbnails { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; } .thumbnails img { width: 50px; height: auto; margin: 0 10px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s ease-in-out; } .thumbnails img:hover { border-color: #ccc; } ``` 其中,`.image-container`类用于设置容器的位置,`.main-image`类用于设置主图片的宽度和高度,`.thumbnails`类用于设置缩略图容器的位置和宽度,并使用`flex`布局使缩略图水平居中显示。`.thumbnails img`类用于设置缩略图的宽度、高度、边距和光标样式,并使用`transition`属性设置动画效果。`.thumbnails img:hover`类用于设置鼠标悬停时的边框颜色。 3. JavaScript交互 最后,需要使用JavaScript实现缩略图的交互效果,即点击缩略图显示对应的大图片。例如: ```javascript const thumbnails = document.querySelectorAll('.thumbnails img'); const mainImage = document.querySelector('.main-image'); thumbnails.forEach(thumbnail => { thumbnail.addEventListener('click', () => { const imagePath = thumbnail.src.replace('thumb', 'image'); mainImage.src = imagePath; }); }); ``` 其中,`thumbnails`变量用于获取所有缩略图元素,`mainImage`变量用于获取主图片元素。然后,使用`forEach`方法循环遍历所有缩略图元素,为每个缩略图元素添加`click`事件监听器。当缩略图被点击时,获取缩略图的路径,并将`thumb`替换为`image`,即可得到对应的大图片路径。最后,将大图片路径赋值给主图片的`src`属性,即可实现缩略图切换效果。 希望这个回答能够帮助到您,如果您还有其他问题,欢迎继续提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值