js在線流程圖製作特效插件代碼（html 流程圖插件）

本文目錄一覽：

1、js動畫效果代碼方法
2、關於Javascript 特效代碼
3、求個簡單javascript代碼謝謝，網站菜單功能

js動畫效果代碼方法

1.toggle():

toggle()方法除了模擬滑鼠連續單擊事件之外，同時會動態的隱藏改變當前元素的高度，寬度和不透明度，最終切換當前元素的可見狀態。如果元素可見，則切換隱藏狀態，如元素隱藏，切換可見狀態

2.fadeln()與fadeOut();

這兩個方法，實現了淡入和淡出的一個動畫效果，fadeln（）漸顯效果，fadeout（）漸隱效果，兩者結合使用，可把元素隱藏在按鈕中，在通過點擊事件顯示，兩方法只改變元素的透明度，不修改其他屬性

3.fadeToggle();

此方法會動態的改變當前元素的透明度，最終卻換當前元素的可見狀態。如果元素是可見的，則通過淡出效果切換隱藏；如果元素是隱藏的，則通過淡入效果切換可見狀態，不設置參數時，默認0.4秒內發生淡入與淡出的動畫效果

4.fadeTo() ;

fadeln()與fadeOut()方法都是漸隱漸顯，透明度從1到0，從0到1實現一個漸隱漸顯效果，而fadeToggle()方法則是可以控制1-0的透明度，為更好展示透明度的效果，可在頁面中創造一個下拉框，用於保存透明度值，操作下拉框去控制圖片透明度值

5.slideDown(); 與 slideUp() ;

slideDown()可改變元素高度，呈現一個滑動效果，由上往下滑動，直到顯示最終的當前元素，slideUp（）相反，由下往上滑動，直到隱藏最終的當前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 與 slideUp() ;兩個方法有異曲同工之妙，同樣可改變元素的高度，不同於slideDown(); 與 slideUp() ; 的效果，這個方法是通過點擊事情控制元素的隱藏和顯示

7.animate() ;

這個方法是自定義動畫效果的方法，高度，寬度，透明度，運行速度都是可通過自定義給屬性，這個方法只能改變可以取數字值的css屬性，如：大小，邊框，內外邊距，定位，字體，文本，背景，透明度。

8.stop() ;

停止動畫，stop（）方法能結束當前的動畫，並立即進入到下一個動畫。

關於Javascript 特效代碼

script language=”JavaScript”

!– Hide the script from old browsers —

function compute(obj) //定義一個函數名字叫compute 他接收了一個參數 obj

{obj.expr.value = eval(obj.expr.value)} //當前的參數的值和下文參數值所用的方法相同

var one = ‘1’ //定義一個字元型的1

var two = ‘2’ //定義一個字元型的2

var three = ‘3’ //定義一個字元型的3

var four = ‘4’ //定義一個字元型的4

var five = ‘5’ //定義一個字元型的5

var six = ‘6’ //定義一個字元型的6

var seven = ‘7’ //定義一個字元型的7

var eight = ‘8’ //定義一個字元型的8

var nine = ‘9’ //定義一個字元型的9

var zero = ‘0’ //定義一個字元型的0

var plus = ‘+’ //定義一個字元型的+

var minus = ‘-‘ //定義一個字元型的*

var multiply = ‘*’ //定義一個字元型的*

var divide = ‘/’ //定義一個字元型的/

var decimal = ‘.’ //定義一個字元型的.

function enter(obj, string) //定義一個函數名字叫enter 他接收了一個參數 obj

{obj.expr.value += string} //讓 obj的值加上 ‘+’後面的值

function clear(obj) //定義一個函數名字叫clear 他接收了一個參數 obj

{obj.expr.value = ”} //讓obj的值等於空

// –End Hiding Here —

/script

form name=”calc”

table border=1

td colspan=4input type=”text” name=”expr” size=30 action=”compute(this.form)” tr

!–提交表單–

tdinput type=”button” value=” 7 ” onClick=”enter(this.form, seven)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 8 ” onClick=”enter(this.form, eight)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 9 ” onClick=”enter(this.form, nine)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” / ” onClick=”enter(this.form, divide)”!–當滑鼠點

擊按鈕的時候提交給函數按鈕中的值–

trtdinput type=”button” value=” 4 ” onClick=”enter(this.form, four)”!–當滑鼠

點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 5 ” onClick=”enter(this.form, five)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 6 ” onClick=”enter(this.form, six)”!–當滑鼠點擊按

鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” * ” onClick=”enter(this.form, multiply)”!–當滑鼠

點擊按鈕的時候提交給函數按鈕中的值–

trtdinput type=”button” value=” 1 ” onClick=”enter(this.form, one)”!–當滑鼠點

擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 2 ” onClick=”enter(this.form, two)”!–當滑鼠點擊按

鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” 3 ” onClick=”enter(this.form, three)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” – ” onClick=”enter(this.form, minus)”!–當滑鼠點

擊按鈕的時候提交給函數按鈕中的值–

trtd colspan=2input type=”button” value=” 0 ” onClick=”enter

(this.form, zero)”!–當滑鼠點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” . ” onClick=”enter(this.form, decimal)”!–當滑鼠

點擊按鈕的時候提交給函數按鈕中的值–

tdinput type=”button” value=” + ” onClick=”enter(this.form, plus)”!–當滑鼠點擊

按鈕的時候提交給函數按鈕中的值–

trtd colspan=2input type=”button” value=” = ” onClick=”compute(this.form)”!

–提交表單在javascript中進行運算–

td colspan=2input type=”button” value=”AC” size= 3 onClick=”clear(this.form)” !–

點擊此按鈕調用此函數–

/table

/form

求個簡單javascript代碼謝謝，網站菜單功能

不用說自己菜不菜的，能有這個學習的精神已經很值得鼓勵了

呵呵，下面，我來給你介紹幾個網站常見的菜單

第一個：仿網易的滑動門導航菜單

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

title仿網易的滑動門技術，用DIV+CSS技術實現/title

style type=”text/css”

!–

#header {

background-color: #F8F4EF;

height: 200px;

width: 400px;

margin: 0px;

padding: 0px;

border: 1px solid #ECE1D5;

font-family: “宋體”;

font-size: 12px;

}

#menu {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#menu li {

display: block;

width: 100px;

text-align: center;

float: left;

margin: 0px;

padding-top: 0.2em;

padding-right: 0px;

padding-bottom: 0.2em;

padding-left: 0px;

cursor: hand;

}

.sec1 { background-color: #FFFFCC;}

.sec2 { background-color: #00CCFF;}

.block { display: block;}

.unblock { display: none;}

—

/style

/head

body

script language=javascript

function secBoard(n)

{

for(i=0;imenu.childNodes.length;i++)

menu.childNodes[i].className=”sec1″;

menu.childNodes[n].className=”sec2″;

for(i=0;imain.childNodes.length;i++)

main.childNodes[i].style.display=”none”;

main.childNodes[n].style.display=”block”;

}

/script

div id=”header”

ul id=”menu”

li onMouseOver=”secBoard(0)” class=”sec2″最新新聞/li

li onMouseOver=”secBoard(1)” class=”sec1″最新文章/li

li onMouseOver=”secBoard(2)” class=”sec1″最新日誌/li

li onMouseOver=”secBoard(3)” class=”sec1″論壇新帖/li

/ul

!–內容顯示區域–

ul id=”main”

li class=”block”第一個內容/li

li class=”unblock”第二個內容/li

li class=”unblock”第三個內容/li

li class=”unblock”第四個內容/li

/ul

!–內容顯示區域–

/div

/body

/html

這裡基本上是使用Css與Div的結合，在整個布局中已層為單位，實行滑動菜單的是一個javascript腳本函數，調用就可以了，看不懂不要緊，日漸積累才是重要

第二個：經典實用的觸髮型導航（這是滑鼠單擊事件控制）

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

title網頁特效代碼|JsCode.CN|—經典實用的觸髮型導航菜單/title

/head

body

STYLE type=text/css.sec1 {

BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; BORDER-LEFT: #ffffff 1px

solid; CURSOR: hand; COLOR: #000000; BORDER-

BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:

#eeeeee

}

.sec2 {

BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:

#000000; BACKGROUND-COLOR: #d4d0c8

}

.main_tab {

BORDER-RIGHT: gray 1px solid; BORDER-

LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8

}

/STYLE

!–JavaScript部分–

SCRIPT language=javascript

function secBoard(n)

{

for(i=0;isecTable.cells.length;i++)

secTable.cells

[i].className=”sec1″;

secTable.cells[n].className=”sec2″;

for(i=0;imainTable.tBodies.length;i++)

mainTable.tBodies

[i].style.display=”none”;

mainTable.tBodies

[n].style.display=”block”;

}

/SCRIPT

!–HTML部分–

TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0

TBODY

TR align=middle height=20

TD class=sec2 onclick=secBoard(0) width=”10%”關於TBODY標記/TD

TD class=sec1 onclick=secBoard(1) width=”10%”關於cells集合/TD

TD class=sec1 onclick=secBoard(2) width=”10%”關於tBodies集合/TD

TD class=sec1 onclick=secBoard(3) width=”10%”關於display屬性/TD/TR/TBODY/TABLE

TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0!–關於TBODY標記–

TBODY style=”DISPLAY: block”

TD vAlign=top align=middleBRBR

TABLE cellSpacing=0 cellPadding=0 width=490 border=0

TBODY

TD指定行做為表體。

BR注釋：TBODY要素是塊要素，並且需要結束標

簽。BR 即使如果表格沒有顯式定義TBODY

要素，該要素也提供給所有表。BRBR

參考：《動態HTML參考和開發應用大全》（人民郵電出

版社

Microsoft Corporation著

北京華中興業科技發展有限公司

譯）

BRBR/TD/TR/TB

ODY/TABLE/TD/TR/T

BODY!–關於cells集合–

TBODY style=”DISPLAY:

none”

TD vAlign=top

align=middleBRBR

TABLE cellSpacing=0

cellPadding=0 width=490 border=0

TBODY

TD檢索錶行或者整個

表中所有單元格的集合。BR應用於TR、TABLE。

BRBR參考：《動態HTML參考和開發應

用大全》（人民郵電出版社

Microsoft Corporation著

北京華中興業科技發展有限公司

譯）

BRBR/TD/TR/TB

ODY/TABLE/TD/TR/T

BODY!–關於tBodies集合–

TBODY style=”DISPLAY:

none”

TD vAlign=top

align=middleBRBR

TABLE cellSpacing=0

cellPadding=0 width=490 border=0

TBODY

TD檢索表中所有TBODY

對象的集合。對象在該集合中按照HTML源順序排列。

BR應用於TABLE。BRBR參考：

《動態HTML參考和開發應用大全》（人民郵電出版社

Microsoft Corporation著

北京華中興業科技發展有限公司

譯）

BRBR/TD/TR/TB

ODY/TABLE/TD/TR/T

BODY!–關於display屬性–

TBODY style=”DISPLAY:

none”

TD vAlign=top

align=middleBRBR

TABLE cellSpacing=0

cellPadding=0 width=490 border=0

TBODY

TD設置或者檢索對象

是否被提供。BR可能的值為block、none、

inline、list-item、table-header-group、table-

footer-group。BR該特性可讀寫，塊要素默認

值為block，內聯要素默認值為inline；層疊樣式表

（CSS）屬性不可繼承。BRBR參考：《

動態HTML參考和開發應用大全》（人民郵電出版社

Microsoft Corporation著

北京華中興業科技發展有限公司譯）

BRBRA

href=”” target=_blank點擊此處

/A可參閱微軟A href=”” target=_blankMSDN在線/A上的解釋。

/TD/TR/TBODY/TABLE

;/TD/TR/TBODY/TABLEg

t;/body

/html

這裡跟上面不同的區別在與這是滑鼠移動和滑動的事件區別！

第三個：仿拍拍的切換效果菜單（裡面的圖片是我放上去的，所以會看不到圖片的，呵呵繼續）

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=”” lang=”zh-CN”

head

meta http-equiv=”Content-Language” content=”zh-cn” /

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

meta name=”robots” content=”all” /

title網頁特效|網頁特效代碼(JsHtml.cn)—仿拍拍paipai.com首頁產品圖片隨機輪顯切換效果/titlestyle

body {font-size:12px}

img {border:0px}

#sale{right:206px;top:0;width:260px;background:#fff}

#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url(“images/saleTitle.gif”) no-repeat}

#saleList{margin-top:5px}

#saleList .saleTwo{height:108px;background:url(“images/salelineH.gif”) bottom repeat-x;}

#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}

#saleList a.saleItem{background:url(“images/salelineV.gif”) right repeat-y;}

#saleList a img{margin:5px 0}

#saleList a:hover{background-color:#EBFFC5}

/style

script type=”text/javascript”

rnd.today=new Date();

rnd.seed=rnd.today.getTime();

function rnd(){

rnd.seed = (rnd.seed*9301+49297) % 233280;

return rnd.seed/(233280.0);

}

function rand(number){

return Math.ceil(rnd()*number)-1;

}

function nextSale(order){

if(order==”up”) saleNum–;

else saleNum++;

if(saleNum2) saleNum=0

else if(saleNum0) saleNum=2;

//alert(saleNum);

for(i=0;i3;i++)

document.getElementById(“saleList”+i).style.display=”none”;

document.getElementById(“saleList”+saleNum).style.display=””;

}

/script

/head

body

div id=”sale” class=”absolute overflow”

div id=”saleTitle” class=”absolute”

a href=”javascript:nextSale(‘up’)” title=”點擊到上一屏”

img src=”images/saleFore.gif” hspace=”4″ onmouseover=”this.src=’images/saleForeOver.gif'” onmouseout=”this.src=’images/saleFore.gif'” //aa href=”javascript:nextSale(‘down’)” title=”點擊到下一屏”img src=”images/saleNext.gif” onmouseover=”this.src=’images/saleNextOver.gif'” onmouseout=”this.src=’images/saleNext.gif'” //a/div

div class=”overflow” style=”height:330px” id=”saleList”

script type=”text/javascript”var saleNum=rand(3);/script

div id=”saleList0″ style=”display:none”

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”聖誕浪漫飾品超級大促” src=”/jsimages/UploadFiles_3321/200804/20080423085515804.jpg” width=”65″ height=”65″ //div

div

聖誕浪漫飾品br /

超級大促/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div

div

攝像頭集結號br /

給你新的感覺/div

/aa href=”” target=”_blank”

div

img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div

div

好感度提升br /

韓版娃娃裝/div

/a/div

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”復古牛仔外套特惠119元起” src=”/jsimages/UploadFiles_3321/200804/20080423085516293.jpg” width=”65″ height=”65″ //div

div

復古牛仔外套br /

特惠119元起/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”聖誕拍拍特供運動服3折” src=”/jsimages/UploadFiles_3321/200804/20080423085516802.jpg” width=”65″ height=”65″ //div

div

聖誕拍拍特供br /

運動服3折/div

/aa href=”” target=”_blank”

div

img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div

div

攝像頭集結號br /

給你新的感覺/div

/a/div

div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”聖誕拍拍特供電腦周邊4折” src=”/jsimages/UploadFiles_3321/200804/20080423085516530.jpg” width=”65″ height=”65″ //div

div

聖誕拍拍特供br /

電腦周邊4折/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”party扮靚甜美腮紅” src=”/jsimages/UploadFiles_3321/200804/20080423085516658.jpg” width=”65″ width=”65″ height=”65″ //div

div

party扮靚br /

甜美腮紅/div

/aa href=”” target=”_blank”

div

img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div

div

好感度提升br /

韓版娃娃裝/div

/a/div

/div

div id=”saleList1″ style=”display:none”

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”新奇好玩便宜盡在網遊頻道” src=”/jsimages/UploadFiles_3321/200804/20080423085516612.jpg” width=”65″ height=”65″ //div

div

新奇好玩便宜br /

盡在網遊頻道/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”展現高貴氣質騎士系馬靴” src=”/jsimages/UploadFiles_3321/200804/20080423085516202.jpg” width=”65″ height=”65″ //div

div

展現高貴氣質br /

騎士系馬靴/div

/aa href=”” target=”_blank”

div

img alt=”攝像頭集結號給你新的感覺” src=”/jsimages/UploadFiles_3321/200804/20080423085516472.jpg” width=”65″ height=”65″ //div

div

攝像頭集結號br /

給你新的感覺/div

/a/div

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”永不過時條紋毛衣” src=”/jsimages/UploadFiles_3321/200804/20080423085516984.jpg” width=”65″ height=”65″ //div

div

永不過時br /

條紋毛衣/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”聖誕拍拍特供運動鞋2折” src=”/jsimages/UploadFiles_3321/200804/20080423085516651.jpg” width=”65″ height=”65″ //div

div

聖誕拍拍特供br /

運動鞋2折/div

/aa href=”” target=”_blank”

div

img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div

div

好感度提升br /

韓版娃娃裝/div

/a/div

div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”精簡唯美索愛K630″ src=”/jsimages/UploadFiles_3321/200804/20080423085516302.jpg” width=”65″ height=”65″ //div

div

精簡唯美br /

索愛K630/div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”原裝瑞士軍刀精選” src=”/jsimages/UploadFiles_3321/200804/20080423085516549.jpg” width=”65″ width=”65″ height=”65″ //div

div

原裝瑞士軍刀br /

精選/div

/aa href=”” target=”_blank”

div

img alt=”超薄機身索愛W880″ src=”/jsimages/UploadFiles_3321/200804/20080423085516711.jpg” width=”65″ height=”65″ //div

div

超薄機身br /

索愛W880/div

/a/div

/div

div id=”saleList2″ style=”display:none”

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”各就各味秋冬飲食計劃” src=”/jsimages/UploadFiles_3321/200804/20080423085516704.jpgtype=3″ width=”65″ height=”65″ //div

div

各就各味br /

秋冬飲食計劃/div

/aa href=”” target=”_blank”

div

img alt=”好感度提升韓版娃娃裝” src=”/jsimages/UploadFiles_3321/200804/20080423085516162.jpg” width=”65″ height=”65″ //div

div

好感度提升br /

韓版娃娃裝/div

/a/div

div class=”saleTwo”

a class=”saleItem” href=”” target=”_blank”

div

img alt=”聖誕拍拍特供隨身視聽5折” src=”/jsimages/UploadFiles_3321/200804/20080423085516375.jpg” width=”65″ height=”65″ //div

div

聖誕拍拍特供br /

隨身視聽5折/div

/aa href=”” target=”_blank”

div

img alt=”超薄機身索愛W880″ src=”/jsimages/UploadFiles_3321/200804/20080423085516711.jpg” width=”65″ height=”65″ //div

div

超薄機身br /

索愛W880/div

/a/div

div

a class=”saleItem” href=”” target=”_blank”

div

img alt=”我愛我家家居大搶購” src=”/jsimages/UploadFiles_3321/200804/20080423085516954.jpg” width=”65″ height=”65″ //div

div

我愛我家br /

家居大搶購/div

/aa href=”” target=”_blank”

div

img alt=”超值彩妝套裝變身派對女王” src=”/jsimages/UploadFiles_3321/200804/20080423085516919.jpg” width=”65″ width=”65″ height=”65″ //div

div

超值彩妝套裝br /

變身派對女王/div

/a/div

/div

script type=”text/javascript”document.getElementById(“saleList”+saleNum).style.display=””;/script

p /p

p更多網頁特效代碼盡在 a href=””網頁特效代碼/a/p

/body

/html

這個仿拍拍基本上就是2層放圖片，但用起來的效果還是可以的，如果不喜歡我還有下面呢，慢慢學，總會看懂的 (最重要的還是Css哦)

這個主要就是讓層實現隱藏我覺得這個在層使用方面還是好的

從總體上看，在實現層與層之間的交互，在其代碼我覺得你有必要去認真看下！

以上是我介紹額度菜單，雖然不是很強大，但是卻很使用，而且在J2EE中

菜單基本上是一個假象，都是用層與Css之間的特效做出來的！

學會了層的具體應用，我相信你也可以有自己特色的菜單的

那我祝你好運咯！！加油！！

原創文章，作者：簡單一點，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/127509.html

js在線流程圖製作特效插件代碼（html 流程圖插件）

本文目錄一覽：

js動畫效果代碼方法

關於Javascript 特效代碼

求個簡單javascript代碼 謝謝，網站菜單功能

相關推薦

發表回復

求個簡單javascript代碼謝謝，網站菜單功能