recherche

Maison >interface Web >js tutoriel >jQuery implémente un effet de fenêtre coulissante imitant le changement de souris sur la page d'accueil de Microsoft_jquery

jQuery implémente un effet de fenêtre coulissante imitant le changement de souris sur la page d'accueil de Microsoft_jquery

WBOY
WBOYoriginal
2016-05-16 15:37:231329parcourir

L'exemple de cet article décrit l'implémentation par jQuery d'un effet de fenêtre coulissante qui imite la page d'accueil de Microsoft et détecte les changements de souris. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une fenêtre coulissante jQuery qui imite la page d'accueil de Microsoft et détecte les changements de souris. Une fois la souris placée, la fenêtre s'étirera vers la gauche et reviendra à son état d'origine une fois la souris retirée. Site Web de Microsoft. Après avoir consulté le code, je trouve qu'il est facile de l'enlever et je n'ose pas le garder pour moi.

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-f-microsoft-web-nav-demo/

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>
<title>jQuery仿微软首页感应鼠标变化的滑动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box{width:100px;height:100px;position:absolute;right:0;color:#fff;}
.box1{top:100px;background:#000;}
.box2{top:250px;background:#333;}
.box3{top:400px;background:#666;}
.box4{top:550px;background:#999;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div class="box box1">应用</div>
<div class="box box2">下载</div>
<div class="box box3">Windows Phone</div>
<div class="box box4">Office</div>
<script type="text/javascript">
$('.box').each(function(){
 $(this).hover(function(){
  $(this).stop().animate({width:'150'},1000);
 },function(){
  $(this).stop().animate({width:'100'},1000);
 });
});
</script>
</body>
</html>

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

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 réalise des compétences d'effet_javascript de commutation de clic de tabulation verticale simple bleu clairArticle suivant：JS réalise des compétences d'effet_javascript de commutation de clic de tabulation verticale simple bleu clair

Articles Liés

Voir plus