jquery implémente l'effet de menu coulissant horizontal de type Flash code

Maison

interface Web

js tutoriel

jquery implémente l'effet de menu coulissant horizontal de type Flash code_jquery

May 16, 2016 pm 03:38 PM

flash jquery

L'exemple de cet article décrit l'implémentation jquery du code d'effet de menu coulissant horizontal de type Flash. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu coulissant jquery imitant Flash. Il est horizontal et a un effet de retard évident. Si vous sentez que le délai est trop long, vous pouvez modifier les paramètres. Grâce à ce menu, je souhaite principalement apprendre quelques animations jQuery. compétences de génération. En même temps, cela reflète également les fonctions puissantes de jquery.

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-flash-style-move-menu-codes/

Le code spécifique est le suivant :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;再发一个仿Flash的jquery滑动菜单，横向&lt;/title&gt;
&lt;script type="text/javascript" src="jquery1.3.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.hoverIntent.js"&gt;&lt;/script&gt;
&lt;script language="javascript"&gt;
$(function(){
  hiConfig = {
   sensitivity: 1,
   interval: 100, 
   timeout: 100, 
   over: function() {
    var x=$(this).offset().left-$("#menu_bar ul").offset().left;
    $("#menu_bar span").animate({left:x+"px",top:'0px'},300);
 }, // function = onMouseOver callback (REQUIRED)
 out: function() {} 
 }
  $("#menu_bar li").hoverIntent(hiConfig)
})
&lt;/script&gt;
&lt;style&gt;
body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}
body &gt; div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}
ul,ol,li{list-style:none;}
td{word-break:break-all;}
a{color:#003cc8;text-decoration:none;}
a:hover{text-decoration:underline;color:blue;}
.f_tahoma{font-family:Tahoma;}
em,i{font-style:normal;}
#menu_bar{widtH:600px;margin:0 auto;background:#000066; position:relative;height:30px;border:1px solid #CCCCCC}
#menu_bar ul{height:30px;overflow:hidden; position:absolute;z-index:2;left:0px;top:0px;line-height:30px;}
#menu_bar li{width:100px;float:left;text-align:center;font-size:14px;font-weight:bold}
#menu_bar li a{color:#fff}
#menu_bar li a:hover{color:#ff7800}
#menu_bar span{display:block;position:absolute;background:#fff;filter: alpha(Opacity=40);opacity: 0.4;-moz-opacity: 0.4;-khtml-opacity: 0.4;width:100px;z-index:1;height:30px;left:0px;top:0px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="menu_bar"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;首页&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;ASP&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;PHP&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;ASP.NET&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;DELPHI&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#" target="_blank"&gt;VC++&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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

Déclaration de ce site Web

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