自己实现的一个简单的相册效果
先贴代码：
<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>
这里有一个animate的函数，查了帮助文档这个是自定义属性用的，看上面就是例子了，这个函数好用，记下。
还有，就是上面选择器用的是$(".img img")，这里的img是一个集合，要怎么判断选择的是哪个呢？参考别人的才知道，被选择的是:$(this)
不被选择的是：$(".img img").not($(this))
这里就这两个要记下。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南