jquery实现仿Flash的横向滑动菜单效果代码
本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码。分享给大家供大家参考。具体如下:
这是一个仿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程序设计有所帮助。
相关文章
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
这篇文章主要帮大家轻松学习jQuery插件EasyUI,并利用EasyUI实现拖动基本操作,文章并提供了一个学校课程表简单实例,感兴趣的小伙伴们可以参考一下2015-11-11如何从jQuery的ajax请求中删除X-Requested-With
X-Requested-With常用于判断是不是ajax请求,ajax请求中删除X-Requested-With的方法如下,感兴趣的朋友可以参考下2013-12-12jQuery prototype冲突的2种解决方法(附demo示例下载)
这篇文章主要介绍了jQuery prototype冲突的2种解决方法,分析了针对jQuery中添加代码与冲突位置添加代码2种情况,并附带demo示例供读者下载参考,需要的朋友可以参考下2016-01-01jquery+ajax每秒向后台发送请求数据然后返回页面的代码
jquery+ajax每秒向后台发送请求数据然后返回页面(包括jquery页面加载完毕才执行方法)2011-01-01jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
这个偏门Bug是我在更新phZoom 1.29后发现的, 我先将之重现一下2012-01-01
最新评论