javascript如何實現(xiàn)動態(tài)效果

JS動態(tài)效果，參考如下：

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的閩侯網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?""

html

head

meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"

title浮動圖片/title

script?type="text/javascript"

var?step?=?1;?//?移動的像素

var?y?=?-1;?//?垂直移動的方向，-1表示向上，1表示向下

var?x?=?1;?//?水平移動的方向，-1表示向左，1表示向右

function?myFloat()

{

var?img?=?document.getElementById("myImg");

//?獲取圖片和當前瀏覽器窗口上邊距，由于img.style.top獲取的值帶px單位

var?top?=?img.style.top.replace("px",?"");

//?top?=?top?-?100;

//?img.style.top?=?top?+?"px";

//?獲取圖片和當前瀏覽器窗口左邊距

var?left?=?img.style.left.replace("px",?"");

//?left?=?left?-?100;

//?img.style.left?=?left?+?"px";

//?上下移動

if(top?=?0)

{

y?=?1;

}

if(top?=?document.body.clientHeight)

{

y?=?-1;

}

top?=?(top*1)?+?(step?*?y);

img.style.top?=?top?+?"px";

//?左右移動

if(left?=?0)

{

x?=?1;

}

//?alert(img.clientWidth);

if(left?=?(document.body.clientWidth?-?img.clientWidth))

{

x?=?-1;

}

left?=?(left*1)?+?(step?*?x);

img.style.left?=?left?+?"px";

setTimeout("myFloat()",?20);

}

/script

/head

body?onload="myFloat();"?style="height:?400px;"

img?id="myImg"?src="IP.gif"

style="position:?absolute;?left:?500px;?top:?400px;?border:?solid?1px?black;"?/

/body

/html

如何通過javascript動態(tài)添加標簽?

可以直接用document.getElementById("divid").innerHTML

=

"p內(nèi)容/p";的方式來寫。

多個可以循環(huán)進行處理。

假設(shè)段落文本是個數(shù)組：array。

可以通過for

(var

i

=

0;

i

array.length;i++)

{document.getElementById("divid").innerHTML

=

"p"+array[i]+"/p";}的方式進行處理。

延展：

如果段落過多,直接使用

div.appendChild方法會不段刷新DIV對象,影響運行速度。

正確的方法應該使用

document對象的碎片方法。

document.createDocumentFragment

容器,最后再將這些碎片返回給DIV對象比較合理，例如:

var

strArrayList=[];

//

創(chuàng)建一個段落文本數(shù)組對象，這些段落文本可能是100個也可能是1000個。

strArrayList[0]='數(shù)據(jù)111.......';

strArrayList[1]='數(shù)據(jù).......';

strArrayList[2]='數(shù)據(jù).......';

strArrayList[3]='數(shù)據(jù).......';

strArrayList[4]='數(shù)據(jù).......';

//...數(shù)據(jù)n.....

var

div=document.getElementById('div1');

//獲得DIV對象。

var

f=document.createDocumentFragment();

//創(chuàng)建碎片對象。

for(var

i=0;istrArrayList.length;i++){

var

p=document.createElement('P');

//動態(tài)創(chuàng)建P標簽。

p.appendChild(document.createTextNode(strArrayList[i]));//段落字符串。

f.appendChild(p);

//附加到碎片對象中。

}

div.appendChild(f);//最后返給DIV對象。

javascript 動態(tài)腳本添加的簡單方法

異步加載js文件或者異步加載js模塊，支持所有瀏覽器，包括IE，參考至javascript高級編程

1.createScript方法用于創(chuàng)建一個script標簽并添加到body標簽中

2.createModule方法用于創(chuàng)建一個script腳本的標簽，并且如果在IE8以下的版本運行會拋出異常，在異常捕獲模塊中執(zhí)行script.text兼容IE添加js的腳本內(nèi)容。

button

id="demo"js文件/button

button

id="demo1"js模塊/button

script

type="text/javascript"

//異步加載文件，支持所有瀏覽器

document.getElementById("demo").onclick

=

function

()

{

createScript("../../js/jquery-1.8.3.min.js");

}

function

createScript(url)

{

var

script

=

document.createElement("script");

script.type

=

"text/javascript";

script.src

=

url;

document.body.appendChild(script);

}

//這里首先會嘗試標準的DOM方法，因為除了IE（在IE中會拋出錯誤），所有瀏覽器都支持這種方法，如果拋出錯誤則說明是IE，于是就必須使用tezt屬性了

document.getElementById("demo1").onclick

=

function

()

{

createModule("function

sayHi(){alert('Hi

!')}");

}

function

createModule(code)

{

var

script

=

document.createElement("script");

script.type

=

"text/javascript";

try

{

script.appendChild(document.createTextNode(code));

}

catch

(ex)

{

script.text(code);

}

document.body.appendChild(script);

}

/script

以上就是小編為大家?guī)淼膉avascript

動態(tài)腳本添加的簡單方法全部內(nèi)容了，希望大家多多支持腳本之家~