jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1、效果及功能说明 

hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏 

2、实现原理 

首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动画标题回到原处不见，背景颜色变回原样 

主要的方法 

Html5代码  收藏代码
  1. $(".section  ul li").hover(function()  
  2. //伪类的触发  
  3.   
  4. $(this).find(".rsp").stop().fadeTo(500,0.5)  
  5. $(this).find(".text").stop().animate({left:'0'}, {duration: 500})  
  6. //这两段就是标题的淡出和背景颜色的改变  
  7.   
  8. $(this).find(".rsp").stop().fadeTo(500,0)  
  9. $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})  
  10. $(this).find(".text").animate({left:'-318'}, {duration: 0})  
  11. //这三段就让标题回放到原来的位置上去，让背景颜色回到原样  


3、效果图 




4、运行环境 

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合 

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果 


7、代码[html5] 

Html5代码  收藏代码
  1. <!DOCTYPE htm>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. </head>  
  5.   
  6. <body>  
  7.   
  8. <style type="text/css">  
  9. *{margin:0;padding:0;list-style-type:none;}  
  10. a,img{border:0;}  
  11. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}  
  12. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}  
  13. .clearfix{display:inline-table;}/* Hides from IE-mac \*/  
  14. *html .clearfix{height:1%;}  
  15. .clearfix{display:block;}/* End hide from IE-mac */  
  16. *+html .clearfix{min-height:1%;}  
  17. /* section */  
  18. .section{width:981px;margin:40px auto 0 auto;overflow:hidden;}  
  19. .section ul{width:996px;}  
  20. .section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;}  
  21. .section ul li .photo{width:318px;height:343px;overflow:hidden;}  
  22. .section .rsp{width:318px;height:343px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}  
  23. .section .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}  
  24. .section .text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color:#FFFFFF;background:#000000;font-family:"microsoft yahei";font-size:26px;}  
  25. </style>  
  26.   
  27. <div class="section">  
  28.     <ul class="clearfix">  
  29.         <li>  
  30.             <div class="photo"><img src="images/index_28.jpg" width="318" height="343" /></div>  
  31.             <div class="rsp"></div>  
  32.             <div class="text"><a href="http://www.17sucai.com/"><h3>布品展示</h3></a></div>  
  33.         </li>  
  34.         <li>  
  35.             <div class="photo"><img src="images/index_30.jpg" width="318" height="343" /></div>  
  36.             <div class="rsp"></div>  
  37.             <div class="text"><a href="http://www.17sucai.com/"><h3>新品纵览</h3></a></div>  
  38.         </li>  
  39.         <li>  
  40.             <div class="photo"><img src="images/index_32.jpg" width="318" height="343" /></div>  
  41.             <div class="rsp"></div>  
  42.             <div class="text"><a href="http://www.17sucai.com/"><h3>灵感街拍</h3></a></div>  
  43.         </li>  
  44.         <li>  
  45.             <div class="photo"><img src="images/index_36.jpg" width="318" height="343" /></div>  
  46.             <div class="rsp"></div>  
  47.             <div class="text"><a href="about.asp"><h3>公司故事</h3></a></div>  
  48.         </li>  
  49.         <li>  
  50.             <div class="photo"><img src="images/index_29.jpg" width="318" height="343" /></div>  
  51.             <div class="rsp"></div>  
  52.             <div class="text"><a href="http://www.17sucai.com/"><h3>留言</h3></a> </div>  
  53.         </li>  
  54.         <li>  
  55.             <div class="photo"><img src="images/index_38.jpg" width="318" height="343" /></div>  
  56.             <div class="rsp"></div>  
  57.             <div class="text"><a href="http://www.17sucai.com/"><h3>联系我们</h3></a></div>  
  58.         </li>  
  59.     </ul>  
  60.     <div class="clear"></div>  
  61. </div>  
  62.   
  63. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  64. <script type="text/javascript">  
  65. $(document).ready(function(){  
  66. //定义一个可以激活所有函数的方法  
  67.       
  68.     $(".section ul li .rsp").hide();  
  69.     //获得隐藏元素方法  
  70.       
  71.     $(".section  ul li").hover(function(){  
  72.     //定义一个伪类鼠标触及事件  
  73.         $(this).find(".rsp").stop().fadeTo(500,0.5)  
  74.         //当鼠标移动到图片上时通过遍历停止所有运行的动画，获得一个淡出事件  
  75.         $(this).find(".text").stop().animate({left:'0'}, {duration: 500})  
  76.         //当鼠标移动到图片上时通过遍历停止所有运行的动画，在移动一个动画让标题出从左边出现  
  77.     },function(){  
  78.     //在jquery 在定义一个方法  
  79.         $(this).find(".rsp").stop().fadeTo(500,0)  
  80.         //当鼠标离开是通过遍历停止动画在让淡出效果回去  
  81.         $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})  
  82.         //通过遍历停止动画后，在触发一个动画让原本出现的标题开始回收，让背景颜色变化正常  
  83.         $(this).find(".text").animate({left:'-318'}, {duration: 0})  
  84.         //通过遍历制动动画，发出动画让标题回到原位，让背景值变回0  
  85.     });  
  86.   
  87. });  
  88. </script>  
  89.   
  90. </body>  
  91. </html>  
posted @ 2014-07-10 09:00  技术狂  阅读(3215)  评论(0)  编辑  收藏  举报