recherche

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

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
WBOYoriginal
2016-05-16 15:34:571429parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS implémente le code d'effet pop-up du texte de la barre d'état du navigateur de droite à gauche_compétences javascriptArticle suivant：JS implémente le code d'effet pop-up du texte de la barre d'état du navigateur de droite à gauche_compétences javascript

Articles Liés

Voir plus