快捷導(dǎo)航

JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法

更新時(shí)間：2015年05月25日 11:05:18 作者：rubychen410

這篇文章主要介紹了JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<html>
<head>
<title>DIV層切換</title>
<script language="JavaScript" type="text/javascript"> 
/*********************************************
功能:  通用DIV切換函數(shù)
參數(shù):  divID --當(dāng)前DIV的ID號(hào)；divName
 --要改變的這一組DIV的命名前綴；zDivCount --這一組DIV的個(gè)數(shù)-1
BY :  JetKing 2007.06 
*********************************************/
function ChangeDiv(divId,divName,zDivCount) 
{ 
 for(i=0;i<=zDivCount;i++)
 {
   document.getElementById(divName+i).style.display="none"; 
 }
 document.getElementById(divName+divId).style.display="block"; 
}
</script> 
</head>
<body>
層切換示例：<br>By:JetKing(www.80Boby.Com)<br>
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" 
style="cursor:hand;">內(nèi)容一</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" 
style="cursor:hand;">內(nèi)容二</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" 
style="cursor:hand;">內(nèi)容三</span>
<div id="BigDIV" 
style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">
內(nèi)容部分第一區(qū)<br><img src="images/common/watermark.gif"></div> 
<div id="JKDiv_1" 
style="display:none;font-size:14px;margin:10px;color:#FF0000;">
內(nèi)容部分第二區(qū)<br><img src="logo.gif"></div> 
<div id="JKDiv_2" 
style="display:none;font-size:14px;margin:10px;color:#FF0000;">
內(nèi)容部分第三區(qū)</div> 
</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)兩周內(nèi)自動(dòng)登錄功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)兩周內(nèi)自動(dòng)登錄功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除)
本篇文章主要介紹了js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除) 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
js屏蔽鼠標(biāo)鍵盤(右鍵/Ctrl+N/Shift+F10/F11/F5刷新/退格鍵)
屏蔽鼠標(biāo)右鍵、Ctrl+N、Shift+F10、F11、F5刷新、退格鍵/Alt+ 方向鍵 →等等，太多了就不一一寫來(lái)了感興趣的朋友可以了解下啊，希望本文對(duì)你有所幫助
2013-01-01
詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別，詳細(xì)的介紹了hash、chunkhash、contenthash的用法和區(qū)別，有興趣的可以了解一下
2018-01-01
js鼠標(biāo)移動(dòng)時(shí)禁止選中文字
本文主要介紹了js鼠標(biāo)移動(dòng)時(shí)禁止選中文字的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
js實(shí)現(xiàn)彈幕飛機(jī)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈幕飛機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
JS中使用media實(shí)現(xiàn)響應(yīng)式布局
本文通過(guò)代碼給大家總結(jié)了常見(jiàn)的響應(yīng)式布局media的使用方法，感興趣的朋友參考下吧
2017-08-08
JS實(shí)現(xiàn)輪播圖效果的3種簡(jiǎn)單方法
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖效果的3種簡(jiǎn)單方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript如何提取PDF中的圖片和文字
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)提取PDF中的圖片和文字,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加
在設(shè)計(jì)網(wǎng)頁(yè)時(shí),有時(shí)需要靜態(tài)或動(dòng)態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下
2023-06-06