javascript实现放大图片功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xuyawei_xyw/article/details/81318953

在实现图片放大功能的时候，可以用两张图片实现，先展示缩略图，鼠标移入时，用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>

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