suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die Implementierung eines dynamischen Bildaufforderungseffekts durch JQuery nach Mouseover_JQuery

Beispiel für die Implementierung eines dynamischen Bildaufforderungseffekts durch JQuery nach Mouseover_JQuery

WBOY
WBOYOriginal
2016-05-16 15:46:121356Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung dynamischer Bildaufforderungseffekte durch jquery, nachdem die Maus darüber gleitet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist der von jquery implementierte Mouseover-Bild-Eingabeaufforderungseffekt. Wenn die Maus auf dem Bild platziert wird, wird das Bild in die obere rechte Ecke verschoben und verkleinert, und die Eingabeaufforderung wird gleichzeitig angezeigt -ähnliche Wirkung und ist jedem zum Lernen zu empfehlen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!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>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vergleich von Javascript- und Python-Schnellsortierungsbeispielen_Javascript-KenntnissenNächster Artikel：Vergleich von Javascript- und Python-Schnellsortierungsbeispielen_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen