這個(gè)其實(shí)很簡(jiǎn)單，只是自己平時(shí)疏于練習(xí)，會(huì)忘記，現(xiàn)在記下來(lái)。先看代碼：

<div id="div1" style="width:5px;height:5px;border-style:solid;border-color:Red;border-width:1px;background-color:Yellow;overflow:hidden;"> 案例：點(diǎn)擊按鈕層動(dòng)態(tài)變大。提示：英文字母連續(xù)單詞不會(huì)在中間自動(dòng)換行的陷阱。 案例：點(diǎn)擊按鈕層動(dòng)態(tài)變大。提示：英文字母連續(xù)單詞不會(huì)在中間自動(dòng)換行的陷阱。 點(diǎn)擊【動(dòng)態(tài)放大】按鈕，文字會(huì)動(dòng)態(tài)的變大。 </div> <input type="button" value="動(dòng)態(tài)放大" οnclick="showDiv();" />

下來(lái)是JS代碼：

var showIntervalId;function showDiv() {showIntervalId = setInterval("inc()", 100);}function inc() {var div1 = document.getElementById('div1');var oldwidth = div1.style.width;oldwidth = parseInt(oldwidth, 10);//這個(gè)parseInt應(yīng)該是吧oldwidth轉(zhuǎn)換為整數(shù)吧var oldheight = div1.style.height;oldheight = parseInt(oldheight, 10);if (oldwidth >= 200) {//如果寬度漲到了200，停止計(jì)時(shí)器、停止繼續(xù)動(dòng)畫長(zhǎng)大clearInterval(showIntervalId);//停止計(jì)時(shí)器}oldwidth += 10;oldheight += 10;div1.style.width = oldwidth + "px";div1.style.height = oldheight + "px";}

知識(shí)點(diǎn)一：var showIntrevalId=setInterval("inc()",100),clearInterval(showIntervalId).

首先，這個(gè)兩個(gè)方法一定要配對(duì)使用，其次，這兩個(gè)方法要放在不同的函數(shù)里，最后，setInterval的第一個(gè)參數(shù)是要調(diào)用的函數(shù)，

第二個(gè)參數(shù)是每次調(diào)用的頻率（時(shí)間為單位，毫秒）。

?

知識(shí)點(diǎn)二：parseInt(string, radix)函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。

上面parseInt(oldheight,10),是吧oldheight轉(zhuǎn)換為十進(jìn)制,其中oldheight初始值為5px

轉(zhuǎn)載于:https://www.cnblogs.com/huaizuo/archive/2011/09/09/2172106.html

總結(jié)

以上是生活随笔為你收集整理的一个层动态放大的例子的一些知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。