<!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=utf-8" /> <title>任意值運動框架</title> <style> div{width:200px;height:200px;background:red;float:left;border:10px black solid;margin:50px;font-size:50px;color:yellow;} #div4{filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function (){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); var oDiv4=document.getElementById('div4'); oDiv1.onmouseover=function (){ StartMove(this,'width',500); }; oDiv1.onmouseout=function (){ StartMove(this,'width',200); }; oDiv2.onmouseover=function (){ StartMove(this,'height',500); }; oDiv2.onmouseout=function (){ StartMove(this,'height',100); }; oDiv3.onmouseover=function (){ StartMove(this,'font-size',100); }; oDiv3.onmouseout=function (){ StartMove(this,'font-size',50); }; oDiv4.onmouseover=function (){ StartMove(this,'opacity',100); }; oDiv4.onmouseout=function (){ StartMove(this,'opacity',30); }; }; function getstyle(obj,name) { if(obj.currentStyle) //針對ie獲取 { return obj.currentStyle[name]; } else //針對非行間樣式 { return getComputedStyle(obj,null)[name]; } }; function StartMove(obj,ss,itarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var cur=0; if(ss=='opacity'){ cur=parseFloat(getstyle(obj,ss))*100 } else { cur=parseInt(getstyle(obj,ss)); } var speed=(itarget-cur)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(itarget-cur==0){ clearInterval(obj.timer); } else{ if(ss=='opacity') { obj.style.filter='alpha(opacity='+(cur+speed)+')'; //通過if-else里的取整解決ie里透明度獲取值存在偏差問題 if((cur+speed)>=30) { obj.style.opacity=Math.ceil((cur+speed))/100; } else { obj.style.opacity=Math.floor((cur+speed))/100; } document.getElementById('txt1').value=cur+speed; } else { obj.style[ss]=cur+speed+'px'; } } },30); }; </script> </head> <body> <div id="div1"> 變寬</div> <div id="div2"> 變高</div> <div id="div3"> 字符變大</div> <div id="div4"> <input id="txt1" type="text" ? /> </div> </body> </html>創新互聯建站是專業的索縣網站建設公司,索縣接單;提供做網站、成都做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行索縣網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
本文名稱:js之任意值運動框架-創新互聯
網頁網址:http://m.newbst.com/article44/hjhhe.html
成都網站建設公司_創新互聯,為您提供全網營銷推廣、網站設計、外貿建站、小程序開發、服務器托管、移動網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯