javascript多物體運動實現(xiàn)方法分析
更新時間：2016年01月08日 11:48:03 作者：lostyu
這篇文章主要介紹了javascript多物體運動實現(xiàn)方法,結(jié)合實例形式分析了JavaScript多物體運動的相關(guān)注意事項與具體實現(xiàn)代碼,包含四個div塊的橫向、豎向移動,顏色與邊框漸變效果,需要的朋友可以參考下
本文實例講述了javascript多物體運動實現(xiàn)方法。分享給大家供大家參考，具體如下：
這里需要注意：每個運動物體的定時器作為物體的屬性獨立出來互不影響，屬性與運動對象綁定，不能公用。
運行效果截圖如下：
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物體運動</title>
<style>
div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
var aDiv = document.getElementsByTagName('div');
aDiv[0].onmouseover = function()
{
startMove(this, 'width', 300);
};
aDiv[0].onmouseout = function()
{
startMove(this, 'width', 100);
};
aDiv[1].onmouseover = function()
{
startMove(this, 'height', 300);
};
aDiv[1].onmouseout = function()
{
startMove(this, 'height', 100);
};
aDiv[2].onmouseover = function()
{
startMove(this, 'opacity', 100);
};
aDiv[2].onmouseout = function()
{
startMove(this, 'opacity', 30);
};
aDiv[3].onmouseover = function()
{
startMove(this, 'borderWidth', 20);
};
aDiv[3].onmouseout = function()
{
startMove(this, 'borderWidth', 1);
};
};
function getStyle(obj, attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCur = 0;
if(attr == 'opacity'){
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
}else{
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
更多關(guān)于JavaScript運動效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
淺談webpack打包過程中因為圖片的路徑導(dǎo)致的問題
下面小編就為大家分享一篇淺談webpack打包過程中因為圖片的路徑導(dǎo)致的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
解決在Bootstrap模糊框中使用WebUploader的問題
這篇文章主要介紹了在Bootstrap模糊框中使用WebUploader的問題及解決方法，,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了新手快速入門JavaScript裝飾者模式與AOP,在不改變對象）的情況下動態(tài)的為其添加功能,這就是裝飾者模式，下面小編帶大家來深入學(xué)習(xí)一下吧2019-06-06
滾動至頁頂，比以前的直接跳到頁頂效果好很多，正的很不錯2008-09-09
這篇文章主要介紹了JS數(shù)組Reduce方法功能與用法,結(jié)合實例形式詳細(xì)分析了JS數(shù)組Reduce方法操作數(shù)組統(tǒng)計、去重等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
最近在做一個列表的時候，涉及到時間格式化操作。本文主要介紹了微信小程序wxs日期時間處理的實現(xiàn)示例，分享給大家，感興趣的可以了解一下2021-07-07
下面小編就為大家?guī)硪黄袛囝伾欠窈戏ǖ恼齽t表達(dá)式(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強大的字符替換處理能力，這里簡單介紹下，方便需要的朋友2013-12-12
jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點】
這篇文章主要介紹了jstree創(chuàng)建無限分級樹的方法,結(jié)合實例形式分析了jstree基于ajax結(jié)合asp.net后臺動態(tài)創(chuàng)建子節(jié)點實現(xiàn)無限分級樹效果的相關(guān)步驟與操作技巧,需要的朋友可以參考下2016-10-10
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調(diào)用，使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個命令用得很多，酷炫的強大功能。2023-07-07