javascript制作的滑動圖片菜單

2024-05-06 16:20:20

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是一款javascript制作的很漂亮的js滑動導航菜單，鼠標經過立即快速滑動切換顯示。有需要的小火把可以參考下。

方法很簡單，特效非常棒，這里就先不多廢話了，直接上代碼

<!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>