javascript制作的滑動(dòng)圖片菜單
更新時(shí)間：2015年05月15日 09:54:32 投稿：hebedich
本文給大家分享的是一款javascript制作的很漂亮的js滑動(dòng)導(dǎo)航菜單，鼠標(biāo)經(jīng)過立即快速滑動(dòng)切換顯示。有需要的小火把可以參考下。
方法很簡單，特效非常棒，這里就先不多廢話了，直接上代碼
<!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滑動(dòng)菜單</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>
再來一個(gè)網(wǎng)友實(shí)現(xiàn)的滑動(dòng)菜單特效
<!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十分好看的滑動(dòng)菜單效果。</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">
一號(hào)菜單
</td>
</tr>
</table>
<div class="zzjs__net" align="center">
<a href="#">一號(hào)分類</a><br/>二號(hào)分類<br/>三號(hào)分類<br/>
</div>
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<table>
<tr>
<td align="center">
二號(hào)菜單
</td>
</tr>
</table>
<div class="zzjs__net" align="center">
<a href="#">四號(hào)分類</a><br/>五號(hào)分類<br/>六號(hào)分類<br/>
</div>
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<table>
<tr>
<td align="center">
三號(hào)菜單
</td>
</tr>
</table>
<div class="zzjs__net" align="center">
<a href="#">七號(hào)分類</a><br/>八號(hào)分類<br/>九號(hào)分類<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("標(biāo)題和內(nèi)容數(shù)目不相同!");
}
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>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- 非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
- javascript 圖片滑動(dòng)切換代碼
- wap手機(jī)圖片滑動(dòng)切換特效無css3元素js腳本編寫
- JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- javascript圖片滑動(dòng)效果實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享
- JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果
- 基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果
相關(guān)文章
JS實(shí)現(xiàn)網(wǎng)頁自動(dòng)刷新腳本的方法
要自動(dòng)刷新網(wǎng)頁,你可以使用JavaScript腳本來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)網(wǎng)頁自動(dòng)刷新腳本的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
本文將提供php版的JavaScript裁剪圖片代碼，僅供大家參考2012-11-11
JavaScript中windows.open()、windows.close()方法詳解
這篇文章主要介紹了JavaScript中windows.open()、windows.close()方法詳解 的相關(guān)資料,需要的朋友可以參考下2016-07-07
用原生JS實(shí)現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實(shí)例
這篇文章主要介紹了用原生JS實(shí)現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript實(shí)現(xiàn)Fly Bird小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Fly Bird小游戲的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript使用Promise控制并發(fā)請(qǐng)求
當(dāng)我們需要同時(shí)處理多個(gè)請(qǐng)求時(shí)，如何避免請(qǐng)求之間的沖突和混亂呢，這就是今天我們要探討的話題——如何使用Promise控制并發(fā)請(qǐng)求，感興趣的可以了解一下2023-06-06
這篇文章主要介紹了JavaScript性能提升，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
uni-app小程序沉浸式導(dǎo)航實(shí)現(xiàn)的全過程
在跨端項(xiàng)目開發(fā)中,uniapp是個(gè)不錯(cuò)的框架,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序沉浸式導(dǎo)航實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了如何在wxml中直接寫js代碼(wxs),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
silverlight線程與基于事件驅(qū)動(dòng)javascript引擎（實(shí)現(xiàn)軌跡回放功能）
前一段時(shí)間一直在重構(gòu)工作站軌跡回放功能，一開始我覺得很簡單，但是后面引發(fā)了一系列奇怪的問題，讓我很蛋疼，所以不得不寫個(gè)總結(jié)加深記憶。2011-08-08