您的位置:首页 >> 资源中心 >> 软硬件教学 >> 浏览文章

最简单实用的鼠标移到图片上变成另外图片的效果集

时间:2015-01-13 | 栏目:软硬件教学 | 来源:不详 | 编辑:蝌索窝pc354.com | 点击:2527 【点击复制链接】

下面这个用来做最简单的切换图片效果,可以用来做产品展示之类的效果

<script>
function showDaTu(src){document.getElementById("defaultImg").src=src;}
</script>
<img src="a.jpg" id="defaultImg">
<br><br>
<img src='b.jpg' onmouseover="showDaTu('c.jpg')">
<img src='d.jpg' onmouseover="showDaTu('e.jpg')">
<img src='f.jpg' onmouseover="showDaTu('g.jpg')">
<img src='h.jpg' onmouseover="showDaTu('i.jpg')">
<br>
因图片较大,请等待图片加载完成……然后鼠标放小图上就会切换了。

鼠标移到图片上会变成另一张图

<img src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">
但此法有个问题:假设第二张图片比较大, 那你这个mouseover 用户要等N久才能看到新的图片, 因为在客户端没有这张图片的缓存, 客户端必须重新发一次请求到服务器端取这张图片。不过可以使用另一种简单的蠢办法,就是加一个0高度的DIV,把 2.jpg放进去,刷新页面时就会加载这张图了。<div style="height:0; overflow:hidden;"><img src="2.jpg" /></div>
  • 软硬件教学
  • 资源收集
  • 生活百科