Exemple de jquery implémentant un effet d'invite d'image dynamique après mouseover

Exemple de jquery implémentant un effet d'invite d'image dynamique après mouseover_jquery

WBOY

Libérer： 2016-05-16 15:46:12

original

1301 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation par jquery d'effets d'invite d'image dynamique après le survol de la souris. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici l'effet d'invite d'image de survol implémenté par jquery. Lorsque la souris est placée sur l'image, l'image glisse vers le coin supérieur droit et se rétrécit, et l'invite s'affiche en même temps. -like et il est recommandé à tout le monde d'en tirer des leçons.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE html>
<head>
<title>jQuery图片动态信息显示幻灯效果</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://files.jb51.net/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://files.jb51.net/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://files.jb51.net/file_images/article/201508/2015810102445216.jpg"></img>
 <div class="info"> 
  <h2>欧洲乡野</h2>
  <p>
  沉浸在大自然的寂静里, Tennessee in 2006. 
  </p>
 </div>
 </div>
<!--end galleryEntry-->
 </div>
 </div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.