欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)后動(dòng)態(tài)圖片提示效果實(shí)例

 更新時(shí)間：2015年08月10日 10:19:39   作者：企鵝  
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)后動(dòng)態(tài)圖片提示效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

這里jquery實(shí)現(xiàn)的鼠標(biāo)懸停圖片提示效果，把鼠標(biāo)放在圖片上的時(shí)候，圖片向右上角滑動(dòng)并縮小，同時(shí)提示顯示出來(lái)，類(lèi)似幻燈片一樣的效果，推薦給大家學(xué)習(xí)借鑒。

運(yùn)行效果截圖如下：

具體代碼如下：

<!DOCTYPE html>
<head>
<title>jQuery圖片動(dòng)態(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>美國(guó)農(nóng)場(chǎng)</h2>
  <p>
  美國(guó)農(nóng)場(chǎng)的大自然美景.
  </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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論