jquery实现仿Flash的横向滑动菜单效果代码


Posted in Javascript onSeptember 17, 2015

本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码。分享给大家供大家参考。具体如下:

这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现。

运行效果截图如下:

jquery实现仿Flash的横向滑动菜单效果代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
js操作数组函数实例小结
Dec 10 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
javascript实现移动端轮播图
Dec 09 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 #Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
为原生js Array增加each方法
2012/04/07 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js获取Get值的方法
2016/09/29 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
详解Python中最难理解的点-装饰器
2017/04/03 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
物业管理工作方案
2014/05/10 职场文书
2014年国庆标语
2014/06/30 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
春节随笔
2015/08/15 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏