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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
小程序实现密码输入框
Nov 16 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
javascript 禁止复制网页
2009/06/11 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python单元测试unittest实例详解
2015/05/11 Python
Python转换时间的图文方法
2019/07/01 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
基于python的列表list和集合set操作
2019/11/24 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
贸易经济专业自荐书
2014/06/29 职场文书
财产分割协议书
2016/03/22 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
Nginx配置https的实现
2021/11/27 Servers