JS實(shí)現(xiàn)多物體運(yùn)動(dòng)
本文實(shí)例為大家分享了JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)效果圖:
描述:用JS實(shí)現(xiàn)簡(jiǎn)單的多物體運(yùn)動(dòng)動(dòng)畫,淡出淡化效果,當(dāng)鼠標(biāo)放在不同div上時(shí),div會(huì)由寬100PX慢慢變成200PX,當(dāng)鼠標(biāo)移開(kāi)之后div恢復(fù)原狀,依次來(lái),實(shí)現(xiàn)多物體運(yùn)動(dòng)效果。
基本步驟:
1.通過(guò)getElementsByTagName獲取到要做多物體運(yùn)動(dòng)的元素
2.然后for循環(huán)遍歷元素,添加事件
3.定義startMove函數(shù),需要兩個(gè)參數(shù),當(dāng)前“做運(yùn)動(dòng)”的元素,和目標(biāo)值target
具體代碼如下:
HTML代碼:
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <script src="startMove.js"></script> ? ? <style> ? ? ? ? div{ ? ? ? ? ? ? width: 100px; ? ? ? ? ? ? height: 100px; ? ? ? ? ? ? background: red; ? ? ? ? ? ? /* opacity: 1; */ ? ? ? ? ? ? margin: 10px 0; ? ? ? ? } ? ? </style> </head> <body> ? ? <div></div> ? ? <div></div> ? ? <div></div> ? ? <div></div> ? ? <div></div> ? ? ? <script> ? ? ? ? // 改變div的width 、height、透明度、邊框 {width:500,height:500,opacity:0.5} ? ? ? ? var divs = document.getElementsByTagName('div'); ? ? ? ? for(var i = 0;i<divs.length;i++){ ? ? ? ? ? ? divs[i].onmouseenter = startMove(divs[i],{width:200,height:200,opacity:50},function(){ ? ? ? ? ? ? ? ? alert('over!') ? ? ? ? ? ? }); ? ? ? ? } ? ? ? ? for(var i = 0;i<divs.length;i++){ ? ? ? ? ? ? divs[i].onmouseleave = startMove(divs[i],{width:100,height:100,opacity:100}); ? ? ? ? } ? ? </script> </body> </html>
js代碼:
/** ?*? ?* @param {*} dom 改變形態(tài)的dom對(duì)象 ?* @param {*} attrObj 要改變的所有元素的屬性形成的對(duì)象 ?* @param {*} target 改變的目標(biāo)值 ?* @returns? ?*/ function startMove(dom, attrObj, callback) { ? ? var timer = null; ? ? var speed = null; ? ? // 元素屬性的當(dāng)前值 ? ? var iCur = null; ? ? return function() { ? ? ? ? clearInterval(dom.timer); ? ? ? ? dom.timer = setInterval(function() { ? ? ? ? ? ? var flag = true; ? ? ? ? ? ? // 0. 循環(huán)遍歷改變的屬性對(duì)象 將每一個(gè)屬性的形態(tài)都進(jìn)行運(yùn)動(dòng) ? ? ? ? ? ? for (var param in attrObj) { ? ? ? ? ? ? ? ? // 1. 判斷改變的屬性是不是透明度 ? ? ? ? ? ? ? ? if (param === 'opacity') { ? ? ? ? ? ? ? ? ? ? iCur = getComputedStyle(dom)['opacity'] * 100; ? ? ? ? ? ? ? ? ? ? // console.log(iCur); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? iCur = +getComputedStyle(dom)[param].slice(0, -2); ? ? ? ? ? ? ? ? ? ? console.log(iCur); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? // 2. 求出speed ? ? ? ? ? ? ? ? speed = (attrObj[param] - iCur) / 7; ? ? ? ? ? ? ? ? // 如果正值 向上取整(0.28 -> 1) ?如果是負(fù)值 向下取整(-0.28 -> -1) ? ? ? ? ? ? ? ? speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); ? ? ? ? ? ? ? ? // 改變div的屬性的值 ? ? ? ? ? ? ? ? if (param === 'opacity') { ? ? ? ? ? ? ? ? ? ? dom.style.opacity = (iCur + speed) / 100; ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? dom.style[param] = iCur + speed + 'px'; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? // 判斷div所有屬性是否到達(dá)目標(biāo)值 ? ? ? ? ? ? ? ? if (iCur !== attrObj[param]) { ? ? ? ? ? ? ? ? ? ? flag = false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? if (flag) { ? ? ? ? ? ? ? ? // 所有屬性值都到了目標(biāo)階段 可以清除定時(shí)器 ? ? ? ? ? ? ? ? clearInterval(dom.timer); ? ? ? ? ? ? ? ? //? ? ? ? ? ? ? ? ? typeof callback === 'function' && callback(); ? ? ? ? ? ? } ? ? ? ? ? ? // 上一個(gè)屬性運(yùn)動(dòng)結(jié)束之后 再讓下一個(gè)屬性開(kāi)始運(yùn)行 ? ? ? ? ? ? // 讓一個(gè)屬性的目標(biāo)值到達(dá)就停止定時(shí)器 ? ? ? ? }, 60) ? ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng)
- JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
- JS運(yùn)動(dòng)改變單物體透明度的方法分析
- JS實(shí)現(xiàn)物體帶緩沖的間歇運(yùn)動(dòng)效果示例
- JS多物體實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果示例
- js多個(gè)物體運(yùn)動(dòng)功能實(shí)例分析
- javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- Javascript 多物體運(yùn)動(dòng)的實(shí)現(xiàn)
- JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動(dòng)
相關(guān)文章
js實(shí)現(xiàn)表單多按鈕提交action的處理方法
這篇文章主要介紹了js實(shí)現(xiàn)表單多按鈕提交action的處理方法,需要的朋友可以參考下2015-10-10詳解使用fetch發(fā)送post請(qǐng)求時(shí)的參數(shù)處理
這篇文章主要介紹了詳解使用fetch發(fā)送post請(qǐng)求時(shí)的參數(shù)處理的相關(guān)資料,需要的朋友可以參考下2017-04-04

Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問(wèn)題

JavaScript DOM 編程藝術(shù)(第2版)讀書筆記(JavaScript的最佳實(shí)踐)

Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼

前端js中的事件循環(huán)eventloop機(jī)制詳解

js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼

js實(shí)現(xiàn)彈出框的拖拽效果實(shí)例代碼詳解