javascript制作的滑動(dòng)圖片菜單
更新時(shí)間：2015年05月15日 09:54:32 投稿：hebedich
本文給大家分享的是一款javascript制作的很漂亮的js滑動(dòng)導(dǎo)航菜單，鼠標(biāo)經(jīng)過(guò)立即快速滑動(dòng)切換顯示。有需要的小火把可以參考下。
方法很簡(jiǎn)單，特效非常棒，這里就先不多廢話了，直接上代碼
<!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>
再來(lái)一個(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)分類(lèi)</a><br/>二號(hào)分類(lèi)<br/>三號(hào)分類(lèi)<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)分類(lèi)</a><br/>五號(hào)分類(lèi)<br/>六號(hào)分類(lèi)<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)分類(lèi)</a><br/>八號(hào)分類(lèi)<br/>九號(hào)分類(lèi)<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("沒(méi)有找到!");
}
}
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>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- 非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
- javascript 圖片滑動(dòng)切換代碼
- wap手機(jī)圖片滑動(dòng)切換特效無(wú)css3元素js腳本編寫(xiě)
- 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)文章
這篇文章主要介紹了BootStrap扔進(jìn)Django里的方法，小編認(rèn)為本文介紹的不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
上次，我講了有關(guān)類(lèi)型區(qū)別和傳遞的問(wèn)題，現(xiàn)在，我給大家在插上一點(diǎn)有關(guān)類(lèi)型賦值的問(wèn)題。2011-07-07
JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
這篇文章主要介紹了JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能,結(jié)合完整實(shí)例形式分析了基于瀏覽器端插件jsPDF實(shí)現(xiàn)的HTML格式數(shù)據(jù)轉(zhuǎn)換成pdf具體操作技巧,需要的朋友可以參考下2018-02-02
防止網(wǎng)站內(nèi)容被拷貝的一些方法與優(yōu)缺點(diǎn)好處與壞處分析
防止網(wǎng)站內(nèi)容被拷貝的一些方法與優(yōu)缺點(diǎn)好處與壞處分析...2007-11-11
這篇文章主要介紹了JS刪除數(shù)組指定值常用方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
詳解WordPress開(kāi)發(fā)中g(shù)et_current_screen()函數(shù)的使用
這篇文章主要介紹了WordPress開(kāi)發(fā)中g(shù)et_current_screen()函數(shù)的使用,get_current_screen()通常在對(duì)象的實(shí)例化時(shí)使用,需要的朋友可以參考下2016-01-01
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過(guò)示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問(wèn)題,感興趣的朋友一起看看吧2024-01-01
下面小編就為大家?guī)?lái)一篇淺談JS的基礎(chǔ)類(lèi)型與引用類(lèi)型。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
關(guān)于javascript 回調(diào)函數(shù)中變量作用域的討論
關(guān)于回調(diào)函數(shù)中變量作用域的討論精品推薦，大家可以參考下。2009-09-09
一個(gè)類(lèi)似vbscript的round函數(shù)的javascript函數(shù)
同vbscript的Round函數(shù)功能相同，四舍五入保留指定小數(shù)位數(shù)2009-04-04