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

先贴代码:

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

这里有一个animate的函数,查了帮助文档这个是自定义属性用的,看上面就是例子了,这个函数好用,记下。

还有,就是上面选择器用的是$(".img img"),这里的img是一个集合,要怎么判断选择的是哪个呢?参考别人的才知道,被选择的是:$(this)

不被选择的是:$(".img img").not($(this))

这里就这两个要记下。

原文地址:https://www.cnblogs.com/huaizuo/p/2171581.html