jQuery réalise l'expansion coulissante et l'effet de masquage du contrôle des images en faisant glisser la souris sur link

jQuery réalise l'expansion coulissante et l'effet de masquage du contrôle des images en faisant glisser la souris sur link_jquery

WBOY

Libérer： 2016-05-16 15:34:57

original

1413 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation par jQuery consistant à faire glisser la souris sur un lien pour contrôler l'expansion par glissement et les effets de masquage de l'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une démonstration de jQuery en déplaçant la souris sur un lien, en glissant pour agrandir/masquer l'effet d'image, en plaçant la souris sur la "page précédente" et la "page suivante", et l'image correspondante apparaîtra immédiatement, un peu comme la prévisualisation à l'avance, permettre aux utilisateurs de connaître la page suivante ou le contenu général de la page suivante améliore considérablement l'expérience utilisateur.

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

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.