自己实现的一个简单的相册效果

最新推荐文章于 2025-08-10 13:51:08 发布

weixin_34273479

最新推荐文章于 2025-08-10 13:51:08 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python c# ViewUI

原文链接：http://www.cnblogs.com/huaizuo/archive/2011/09/08/2171581.html

本文介绍了一个简单的JavaScript代码片段，用于实现图片的鼠标悬停放大和点击加载大图的功能。通过使用$.animate()函数，可以自定义图片大小，同时在点击时改变背景颜色并加载大尺寸图片。

先贴代码：

<script type="text/javascript">
 $(function(){
   $(".img img").mouseover(function(){
     //接下来要判断鼠标是在哪一张照
     $(this).animate({width:"300",height:"450"});
	 $(".img img").not($(this)).animate({width:"150",height:"100"})
   }).click(function(){//鼠标点击的时候
     //吧被点击的图片的src赋值给bigImg的img
	 $("body").css("background-color","#666666");
	 $("#bigimg").attr("src",$(this).attr("src"));
   }).mouseout(function(){
     $(this).animate({width:"150",height:"100"});
   })
 });
</script>

<body>

<table width="200" border="0">
<tr class="img">
<td><img class="hjj1" width="150" height="100" src="../images/hjj1.jpg"/></td>
<td><img class="hjj2" width="150" height="100" src="../images/hjj2.jpg"/></td>
<td><img class="hjj3" width="150" height="100" src="../images/hjj3.jpg"/></td>
</tr>
</table>
<div class="bigImg" style="position:absolute; top:100px; left:200px;;>
<img id="bigimg"/>
</div>
</body>