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 相关文章推荐
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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 xml 入门学习资料
2011/01/01 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php ios推送(代码)
2013/07/01 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python交互式图形编程实例(三)
2017/11/17 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python配置文件写入过程详解
2019/10/19 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
离职证明格式样本
2015/06/12 职场文书
Python图片检索之以图搜图
2021/05/31 Python