碼上快樂

相關內容    簡體    繁體

jQuery hover事件鼠標滑過圖片半透明標題文字滑動顯示隱藏

本文轉載自   查看原文   2014-07-10 09:00   2792 
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>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery之鼠標滑過圖片mousemove事件 鼠標滑過圖片變暗文字鏈接滑出jQuery特效 鼠標滑過時顯示圖片內容隱藏和鼠標滑過圖片隱藏內容顯示的兩種小方法 CSS實現文字半透明顯示在圖片上方法 jQuery鼠標移入顯示隱藏的事件 鼠標滑過切換div顯示（鼠標事件） 鼠標移入標題，標題文字全部顯示 jquery鼠標懸停事件hover() jQuery – 鼠標經過(hover)事件的延時處理 jQuery事件-div的顯示隱藏及鼠標的移入移出
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM