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中Math.SQRT2属性的使用详解
Jun 14 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
web打印小结
Jan 11 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
微信小程序调用后台service教程详解
Nov 06 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
分享10段PHP常用代码
2015/11/11 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年双拥工作总结
2014/11/21 职场文书
话题作文之学会尊重
2019/12/16 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
基于PyQt5制作一个群发邮件工具
2022/04/08 Python