ホームページ >ウェブフロントエンド >jsチュートリアル >jquery は Flash のような水平スライド メニュー効果を実装します code_jquery
jquery は Flash のような水平スライド メニュー効果を実装します code_jquery
- WBOYオリジナル
- 2016-05-16 15:38:57917ブラウズ
この記事の例では、Flash のような水平スライディング メニュー効果コードの jquery 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、Flash を模倣した jQuery のスライディング メニューです。水平方向であり、遅延が長すぎると感じる場合は、主に jQuery アニメーションを学習することができます。同時に、これは jquery の強力な機能を反映しています。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/
具体的なコードは次のとおりです:
<!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=utf-8" />
<title>再发一个仿Flash的jquery滑动菜单，横向</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script language="javascript">
$(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)
})
</script>
<style>
body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}
body > 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;}
</style>
</head>
<body>
<div id="menu_bar">
<ul>
<li><a href="#" target="_blank">首页</a></li>
<li><a href="#" target="_blank">ASP</a></li>
<li><a href="#" target="_blank">PHP</a></li>
<li><a href="#" target="_blank">ASP.NET</a></li>
<li><a href="#" target="_blank">DELPHI</a></li>
<li><a href="#" target="_blank">VC++</a></li>
</ul>
<span></span>
</div>
</body>
</html>
この記事が皆さんの jQuery プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。