javascript实现放大图片功能

最新推荐文章于 2019-05-01 16:09:14 发布

原创最新推荐文章于 2019-05-01 16:09:14 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一种使用两张图片和JavaScript实现图片放大预览的方法。通过在鼠标悬停时切换图片显示状态，实现了从缩略图到大图的平滑过渡。此技巧适用于网页设计中需要提供图片放大功能的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现图片放大功能的时候，可以用两张图片实现，先展示缩略图，鼠标移入时，用js实现切换到图片。

下面是代码实现：

<!--onmousemove() 鼠标指针移动到图像上时执行一段 JavaScript，鼠标移入display = block -->
<!--onmouseout() 鼠标指针移出 JavaScript，鼠标移入display = none -->
<div style="margin:4px; position:relative" onmousemove="open_af('{$id}', 'block')" onmouseout="open_af('{$id}', 'none')">
    <!-- 从数据库查询出的图，设置高度50px -->
    <img src="{$ad_list_image}" width="50px" style="cursor:pointer"/>
    <div id="open_af_{$id}" style="display:none; position:absolute; float:left; z-index:1000; border:#E5E5E5 solid 2px">
        <!-- 从数据库查询出的图 -->
	<img src="{$ad_list_image}" />
    </div>
</div>
<script language="javascript">
    <!-- 鼠标移入js切换函数 -->
    function open_af(m_id, m_t){
        document.getElementById("open_af_" + m_id).style.display = m_t;
    }
</script>

结果如下图所示，当鼠标放在小图上时，大图展示出来：