A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 崔晓聪 中级黑马   /  2012-11-11 12:22  /  2520 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

       学与致用,学了些前端知识自己随便弄了下,和大家分享分享!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.        
  6. <script src="jquery-1.7.1.min.js"></script>
  7. <script>
  8.         $(document).ready(function(){
  9.                 $(".aa").hover(function(){
  10.                         $(this).children("div").fadeIn("slow");
  11.                 },function(){
  12.                         $(this).children("div").fadeOut("slow");
  13.                 })
  14.         })
  15.        
  16. </script>
  17. <title>无标题文档</title>

  18. <style>
  19. .aa:hover{display:block;}
  20. </style>

  21. </head>

  22. <body>
  23.         <div style="width:950px;height:463px;outline:1px dashed #666;margin:0 auto;">
  24.            
  25.         <div class="aa" style="width:228px;height:463px;float:left;position:relative;">
  26.                 <img src="T1QiSDXmNAXXXXXXXX.jpg" />
  27.             <div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute; display:none;"></div>
  28.         </div>
  29.         
  30.         <div style="float:left;width:700px;">
  31.                 <div style="width:auto;">
  32.                     <div class="aa" style="float:left;position:relative;" ><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
  33.                 <div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>       
  34.                 <p style="margin:0;padding:0;clear:both;"></p>       
  35.             </div>
  36.             <div style="width:auto;">
  37.                     <div class="aa" style="float:left;position:relative;"><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
  38.                 <div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>       
  39.                 <p style="margin:0;padding:0;clear:both;"></p>       
  40.             </div>
  41.         </div>
  42.         <p style="margin:0;padding:0;clear:both;"></p>
  43.            
  44.     </div>
  45. </body>
  46. </html>
复制代码
http://bbs.itheima.com/forum.php?mod=attachment&aid=OTMxMnw4MTA4OTM5MmY2N2ZiMTE3YjIzNTM2ZWUxMjVlNjhhMnwxNzM1MTM2ODI0&request=yes&_f=.rar

点评

好一个学以致用。。哈哈。不错。  发表于 2012-11-11 21:29

评分

参与人数 1技术分 +1 收起 理由
张文 + 1

查看全部评分

3 个回复

倒序浏览
值得学习ing!
回复 使用道具 举报
学习一下,感谢分享!
回复 使用道具 举报
再顶一下
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马