jQuery realisiert den gleitenden Erweiterungs- und Ausblendeffekt der Steuerung von Bildern, indem die Maus über link

jQuery realisiert den gleitenden Erweiterungs- und Ausblendeffekt der Steuerung von Bildern, indem die Maus über link_jquery bewegt wird

WBOY

Freigeben： 2016-05-16 15:34:57

Original

1395 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung, bei der die Maus über einen Link bewegt wird, um die gleitenden Erweiterungs- und Ausblendungseffekte des Bildes zu steuern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration, wie jQuery die Maus über einen Link bewegt, den Bildeffekt durch Schieben erweitert/ausblendet, die Maus auf die „vorherige Seite“ und die „nächste Seite“ setzt und das entsprechende Bild sofort ein wenig erscheint B. eine Vorschau im Voraus, sodass Benutzer die nächste Seite oder den allgemeinen Inhalt der nächsten Seite kennen, was die Benutzererfahrung erheblich verbessert.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标移动链接上，滑动展开/隐藏图片效果</title>
<script language="javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $(".list>li:has(div)").hover(function(){
   $(this).children('a').addClass('red').end().find('div').slideDown("fast");},
  function(){
   $(this).children('a').removeClass('red').end().find('div').slideUp("fast");
  });
 });
</script>
<style>
*{margin:0;padding:0}
body{background:#F8F3ED}
li{list-style:none}
.list{height:40px;background:#fff;padding-left:100px;}
.list li{float:left;position:relative;}
.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微软雅黑";}
.list li a:hover{background:#99C228;color:#FFF;}
.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}
.list .box img{width:220px;height:150px;margin:10px;}
.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}
</style>
</head>
<body>
<ul class="list">
 <li><a href="javascript:;">上一页</a>
  <div class="box"><img src="images/wall_s9.jpg" /></div>
 </li>
 <li><a href="javascript:;">下一页</a>
  <div class="box"><img src="images/wall_s7.jpg" /></div>
 </li>
</ul>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.