javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析

更新時(shí)間：2016年01月08日 11:48:03 作者：lostyu

這篇文章主要介紹了javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript多物體運(yùn)動(dòng)的相關(guān)注意事項(xiàng)與具體實(shí)現(xiàn)代碼,包含四個(gè)div塊的橫向、豎向移動(dòng),顏色與邊框漸變效果,需要的朋友可以參考下

本文實(shí)例講述了javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

這里需要注意：每個(gè)運(yùn)動(dòng)物體的定時(shí)器作為物體的屬性獨(dú)立出來(lái)互不影響，屬性與運(yùn)動(dòng)對(duì)象綁定，不能公用。

運(yùn)行效果截圖如下：

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物體運(yùn)動(dòng)</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運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談webpack打包過(guò)程中因?yàn)閳D片的路徑導(dǎo)致的問(wèn)題
下面小編就為大家分享一篇淺談webpack打包過(guò)程中因?yàn)閳D片的路徑導(dǎo)致的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
解決在Bootstrap模糊框中使用WebUploader的問(wèn)題
這篇文章主要介紹了在Bootstrap模糊框中使用WebUploader的問(wèn)題及解決方法，,需要的朋友可以參考下
2018-03-03
新手快速入門(mén)JavaScript裝飾者模式與AOP
這篇文章主要介紹了新手快速入門(mén)JavaScript裝飾者模式與AOP,在不改變對(duì)象）的情況下動(dòng)態(tài)的為其添加功能,這就是裝飾者模式，下面小編帶大家來(lái)深入學(xué)習(xí)一下吧
2019-06-06
點(diǎn)選TOP后并不是直接跳到頁(yè)頂?shù)模菨L動(dòng)上去
滾動(dòng)至頁(yè)頂，比以前的直接跳到頁(yè)頂效果好很多，正的很不錯(cuò)
2008-09-09
JS數(shù)組Reduce方法功能與用法實(shí)例詳解
這篇文章主要介紹了JS數(shù)組Reduce方法功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組Reduce方法操作數(shù)組統(tǒng)計(jì)、去重等相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例
最近在做一個(gè)列表的時(shí)候，涉及到時(shí)間格式化操作。本文主要介紹了微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例，分享給大家，感興趣的可以了解一下
2021-07-07
判斷顏色是否合法的正則表達(dá)式(詳解)
下面小編就為大家?guī)?lái)一篇判斷顏色是否合法的正則表達(dá)式(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
JS的replace方法
在javascript中，String的函數(shù)replace()簡(jiǎn)直太讓人喜愛(ài)了。它靈活而強(qiáng)大的字符替換處理能力，這里簡(jiǎn)單介紹下，方便需要的朋友
2013-12-12
jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
這篇文章主要介紹了jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法,結(jié)合實(shí)例形式分析了jstree基于ajax結(jié)合asp.net后臺(tái)動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)實(shí)現(xiàn)無(wú)限分級(jí)樹(shù)效果的相關(guān)步驟與操作技巧,需要的朋友可以參考下
2016-10-10
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過(guò)JavaScript代碼來(lái)調(diào)用，使得開(kāi)發(fā)者可以在網(wǎng)頁(yè)中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多，酷炫的強(qiáng)大功能。
2023-07-07