您的位置: 首页 > 源码资料
最简单实用的鼠标移到图片上变成另外图片的效果集
源码资料 时间:2014-09-26 作者/发布人:科杰在线 点击:3932
下面这个用来做最简单的切换图片效果，可以用来做产品展示之类的效果
<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>
<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>
--------------------------全文完----------------------------
0% (0)
0% (0)
