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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
js简易版购物车功能
Jun 17 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
微信小程序实现留言功能
Oct 31 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP7多线程搭建教程
2017/04/21 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
js jquery数组介绍
2012/07/15 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
python optparse模块使用实例
2015/04/09 Python
python抓取百度首页的方法
2015/05/19 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
行政助理岗位职责
2013/11/10 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
长城导游词400字
2015/01/30 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS