CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果
2012-10-10 22:59
1081 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果</title> <style> body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,pre,form,fieldset,input,p,blockquote,th,td,br,img {margin:0; padding:0;} ol,ul,li {list-style-type:none;} img {border:0; display:block;} table { border-collapse:collapse;} h1, h2, h3, h4, h5, h6 {font-weight:700;} h1 {font-size:20px; line-height:28px;} h2 {font-size:18px; line-height:24px;} h3 {font-size:16px; line-height:18px;} h4 {font-size:14px;} h5 {font-size:12px; line-height:16px;} h6 {font-size:12px; line-height:16px; font-weight:400;} hr{ height:1px; border:none; border-bottom:1px dashed #ddd;} a:link,a:visited{ color:#666; text-decoration:none;} a:hover{ color:#679100; text-decoration:underline;} .globalWidth{ width:980px; margin:0px auto;} .colord{ color:#ddd;} .color6{ color:#666;} #Wapper{ width:980px; margin:0px auto; margin-top:10px;} /*album*/ .albumIndex{ position:relative; height:315px;} .albumIndex_1{ position:absolute; left:0px; top:0px;} .albumIndex_2{ position:absolute; left:0px; top:143px;} .albumIndex_3{ position:absolute; left:233px; top:0x;} .albumIndex_4{ position:absolute; left:444px; top:0x;} .albumIndex_5{ position:absolute; left:444px; top:143px;} .albumIndex_6{ position:absolute; left:601px; top:143px;} .albumIndex_7{ position:absolute; right:0px; top:0px;} .albumIndex_8{ position:absolute; right:0px; bottom:0px;} .albumIndex .albumTitle{ width:100%; position:absolute; bottom:0px; background:#fff; z-index:999999; display:none;} .mask { position: absolute; background: #000; opacity: 0; filter: alpha(opacity=0); left: 0; top: 0; width:221px;} .maskblack { position: absolute; background: #000; opacity: 0; filter: alpha(opacity=0); left: 0; top: 0; width:221px;} .albumIndex #m1{ width:232px; height:142px; } .albumIndex #m2{ width:232px; height:172px; } .albumIndex #m3{ width:211px; height:315px; } .albumIndex #m4{ width:314px; height:142px; } .albumIndex #m5{ width:156px; height:172px; } .albumIndex #m6{ width:157px; height:172px; } .albumIndex #m7{ width:221px; height:172px; } .albumIndex #m8{ width:221px; height:142px; } </style> <script src="/images/jquery-1.6.2.min.js" type="text/jscript"></script> <script type="text/jscript"> $(function(){ $(".albumIndex .posdiv").each(function() { $(this).hover(function() { $(this).siblings().find(".mask").stop(); $(this).find(".albumTitle").stop(); $(this).siblings().find(".mask").fadeTo("fast",0.3); $(this).find(".albumTitle").fadeTo("fast",0.7); }, function() { $(this).siblings().find(".mask").stop(); $(this).siblings().find(".mask").fadeTo("fast",0); $(this).find(".albumTitle").hide(); }); }); }) </script> </head> <body> <div id="Wapper"> <div class="albumIndex"> <div class="albumIndex_1 posdiv"> <a href="#"><img src="http://www.csrcode.cn/images/m01.jpg" width="232" height="142" /><div class="mask" id="m1"> </div></a> <div class="albumTitle"> <p>asdfasdfasdf</p> <p><a href="#">查看详细</a></p> </div> </div> <div class="albumIndex_2 posdiv"> <a href="#"><img src="http://www.csrcode.cn/images/m02.jpg" width="232" height="172" /><div class="mask" id="m2"> </div></a> <div class="albumTitle"> <p>asdfasdfasdf</p> <p><a href="#">查看详细</a></p> </div> </div> <div class="albumIndex_3 posdiv"> <a href="#"><img src="http://www.csrcode.cn/images/m03.jpg" width="211" height="315" /><div class="mask" id="m3"> </div></a> <div class="albumTitle"> <p>asdfasdfasdf</p> <p><a href="#">查看详细</a></p> </div> </div> </div> </div> </body> </html> <br>第一次运行本代码,请刷新一下本页面先~~<br>所需js文件:<a href="http://www.csrcode.cn/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
相关文章推荐
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- jquery实现鼠标滑过后动态图片提示效果实例
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- jQuery实现鼠标滑过图片放大效果
- css实现基本的鼠标滑过图片添加遮蔽层效果
- jQuery实现鼠标滑过预览图片大图效果的方法
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- jquery实现鼠标滑过后动态图片提示效果实例
- CSS实现鼠标滑过时显示图片说明
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- Jquery实现鼠标放在图片上面显示大图效果
- jQuery实现鼠标滑过延时显示的效果
- Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
- JS实现鼠标滑过图片的抖动效果
- JQuery实现鼠标移动到图片上显示边框效果
- jQuery+CSS实现的图片滚动效果
- jquery实现鼠标滑过炫酷效果
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码