search

Home >Web Front-end >JS Tutorial >jquery implements Flash-like horizontal sliding menu effect code_jquery

jquery implements Flash-like horizontal sliding menu effect code_jquery

WBOY
WBOYOriginal
2016-05-16 15:38:57895browse

The example in this article describes the jquery implementation of Flash-like horizontal sliding menu effect code. Share it with everyone for your reference. The details are as follows:

This is a jquery sliding menu imitating Flash. It is horizontal and has an obvious delay effect. If you feel that the delay is too long, you can modify the parameters. Through this menu, I mainly want to learn some jQuery animation generation skills. At the same time This is also a reflection of the powerful functions of jquery.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/

The specific code is as follows: 

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

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements imitating Tencent mini homepage tab effect code_jqueryNext article：jQuery implements imitating Tencent mini homepage tab effect code_jquery

Related articles

See more