javascript制作的滑动图片菜单


Posted in Javascript onMay 15, 2015

方法很简单,特效非常棒,这里就先不多废话了,直接上代码

<!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=gb2312" />
<title>js滑动菜单</title>
<style>
* {margin:0; padding:0}
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
</style>
<script type="text/javascript">
var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function()


{slideMenu.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width,'10');
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)


+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();
</script>
</head>
<body onload="slideMenu.build('sm',200,10,10,1)">
<ul id="sm" class="sm">
<li><img src="1.gif" alt="" /></li>
<li><img src="2.gif" alt="" /></li>
<li><img src="3.gif" alt="" /></li>
<li><img src="4.gif" alt="" /></li>
</ul>
</body>
</html>

再来一个网友实现的滑动菜单特效

<!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=gb2312" />
<title>js十分好看的滑动菜单效果。</title>
<style type="text/css">
body{
 margin:10px;
 padding:10px;
}
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
body,td,div,span,li{
 font-size:12px;
}
.title01,.title02{
 color:#00b;
 font-weight:bold;
}
#DoorP{
 width:200px;
 height:300px;
 padding:0px;
 background:#FFFCF2;
 overflow:hidden;
}
.title01{
 width:100%;
 height:25px;
 background:#FFFCF2;
 cursor:pointer;
}
.title02{
 width:100%;
 height:25px;
 background:#FFFCF2;
 cursor:pointer;
}
.zzjs__net{
 background:#FFFCF2;
 border-bottom:2px solid #fff;
 overflow:hidden;
 color:#666;
 padding-left:4px;
 padding-right:4px;
 line-height:18px;
}
.www_zzjs_net {
 width:202px;
 }
.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 {
 font-size:1px;
 display:block;
 background:#FFFCF2;
overflow: hidden;
}
.www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3 {
 height:1px;
 }
.www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 {
 background:#FFFCF2;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 }
.www_zzjs_net .b1 {
 margin:0 4px;
 background:#C7BC98;
 }
.www_zzjs_net .b2 {
 margin:0 2px;
 border-width:0 2px;
 }
.www_zzjs_net .b3 {
 margin:0 1px;
 }
.www_zzjs_net .b4 {
 height:2px;
 margin:0;
 }
.www_zzjs_net .c1 {
 margin:0 5px;
 background:#C7BC98;
 }
.www_zzjs_net .c2 {
 margin:0 3px;
 border-width:0 2px;
 }
.www_zzjs_net .c3 {
 margin:0 2px;
 }
.www_zzjs_net .c4 {
 height:2px;
 margin: 0 1px;
 }
.www_zzjs_net .zzjs_net {
 display:block;
 background:transparent;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 font-size:0.9em;
 text-align:justify;
 }
</style>
</head>
<body>
<div class="www_zzjs_net">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
 <div class="zzjs_net">
<div id="DoorP">
 <table>
 <tr>
  <td align="center">
   一号菜单
  </td>
 </tr>
 </table>
 <div class="zzjs__net" align="center">
 <a href="#">一号分类</a><br/>二号分类<br/>三号分类<br/>
 </div>
  <b class="b1"></b>
  <b class="b2"></b>
  <b class="b3"></b>
  <b class="b4"></b>
 <table>
 <tr>
  <td align="center">
  二号菜单
  </td>
 </tr>
 </table>
<div class="zzjs__net" align="center">
 <a href="#">四号分类</a><br/>五号分类<br/>六号分类<br/>
</div>
  <b class="b1"></b>
  <b class="b2"></b>
  <b class="b3"></b>
  <b class="b4"></b>
 <table>
 <tr>
  <td align="center">
  三号菜单
  </td>
 </tr>
 </table>
<div class="zzjs__net" align="center">
 <a href="#">七号分类</a><br/>八号分类<br/>九号分类<br/>
 </div>
</div></div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
<script type="text/javascript">
 var open = 2;
 var openState = new Array();
 var closeState = new Array();
 var dH = 220;
 function $(id){
 if(document.getElementById(id))
 {
  return document.getElementById(id);
 }
 else
 {
  alert("没有找到!");
 }
 }
 function $tag(id,tagName){
 return $(id).getElementsByTagName(tagName)
 }
 function closeMe(Cid,Oid){
 var h = parseInt(Ds[Cid].style.height);
 //alert(h);
 if(h > 2)
 {
  h = h - Math.ceil(h/3);
  Ds[Cid].style.height = h+"px";
 }
 else
 {
  openMe(Oid);
  clearTimeout(closeState[Cid]);
  return false;
 }
 closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
 }
 function openMe(Oid){
 var h = parseInt(Ds[Oid].style.height);
 //alert(h);
 if(h < dH)
 {
  h = h + Math.ceil((dH-h)/3);
  Ds[Oid].style.height = h+"px";
 }
 else
 {
  clearTimeout(openState[Oid]);
  return false;
 }
 openState[Oid] = setTimeout("openMe("+Oid+")");
 }
 var Ds = $tag("DoorP","div");
 var Ts = $tag("DoorP","table");
 if(Ds.length != Ts.length)
 {
 alert("标题和内容数目不相同!");
 }
 for(var i = 0 ; i < Ds.length ; i++)
 {
 if(i==open)
 {
  Ds[i].style.height = dH+"px";
  Ts[i].className="title01";
 }
 else
 {
  Ds[i].style.height = "0px";
  Ts[i].className="title02";
 }
 Ts[i].value = i;
 Ts[i].onmouseover = function(){
  if(open==this.value)
  {
  return false;
  }
  Ts[open].className="title02";
  Ts[this.value].className="title01";
  for(var i = 0 ; i < openState.length ; i++)
  {
  clearTimeout(openState[i]);
  clearTimeout(closeState[i]);
  }
  closeMe(open,this.value);
  //openMe(this.value);
  open = this.value;
 }
 }
 function showDiv(id){
 Ds[id].style.height=dH+"px";
 Ds[open].style.height="0px";
 open = id;
 }
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
Javascript节点关系实例分析
May 15 #Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 #Javascript
Javascript进制转换实例分析
May 14 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
php eval函数用法总结
2012/10/31 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
学习Vue组件实例
2018/04/28 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python实现翻转数组功能示例
2018/01/12 Python
python实现文件的分割与合并
2019/08/29 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python正则表达式如何匹配中文
2020/05/27 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
周年庆典邀请函范文
2014/01/23 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
预备党员群众意见
2015/06/01 职场文书
安全教育培训心得体会
2016/01/15 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
4种方法python批量修改替换列表中元素
2022/04/07 Python