jquery實現(xiàn)鼠標滑過后動態(tài)圖片提示效果實例

更新時間：2015年08月10日 10:19:39 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)鼠標滑過后動態(tài)圖片提示效果,涉及jquery鼠標事件及頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)鼠標滑過后動態(tài)圖片提示效果。分享給大家供大家參考。具體如下：

這里jquery實現(xiàn)的鼠標懸停圖片提示效果，把鼠標放在圖片上的時候，圖片向右上角滑動并縮小，同時提示顯示出來，類似幻燈片一樣的效果，推薦給大家學習借鑒。

運行效果截圖如下：

具體代碼如下：

<!DOCTYPE html>
<head>
<title>jQuery圖片動態(tài)信息顯示幻燈效果</title>
<style>
.galleryContainer {width: 1024px;}
.galleryImage { background-color:black; width:325px; height:260px; overflow:hidden; margin:5px; float:left;}
.info { margin-left:10px; font-family:arial;padding:3px;}
.info h2 { color:gray;}
.info p { color:white}
.clear { clear:both; margin-top:10px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $('.galleryImage').hover(
 function(){
 $(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 500);
 },
 function(){
  $(this).find('img').animate({width:325, marginTop:0, marginLeft:0},300);
 });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="galleryContainer">
<!--galleryEntry--> 
 <div class="galleryImage">
 <img src="http://img.jbzj.com/file_images/article/201508/2015810102423303.jpg"></img>
 <div class="info"> 
  <h2>美國農場</h2>
  <p>
  美國農場的大自然美景.
  </p>
 </div>
 </div>
<!--end galleryEntry-->
<!--galleryEntry--> 
 <div class="galleryImage">
 <img src="http://img.jbzj.com/file_images/article/201508/2015810102436957.jpg"></img>
 <div class="info"> 
  <h2>日落黃昏</h2>
  <p>
  美麗的日落，拍攝于2009年10月16日，印度尼西亞。
  </p>
 </div>
 </div>
<!--end galleryEntry-->
<!--galleryEntry--> 
 <div class="galleryImage">
 <img src="http://img.jbzj.com/file_images/article/201508/2015810102445216.jpg"></img>
 <div class="info"> 
  <h2>歐洲鄉(xiāng)野</h2>
  <p>
  沉浸在大自然的寂靜里, Tennessee in 2006. 
  </p>
 </div>
 </div>
<!--end galleryEntry-->
 </div>
 </div>
</body>
</html>

希望本文所述對大家的jquery程序設計有所幫助。

您可能感興趣的文章: