欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)多物體運(yùn)動(dòng)

 更新時(shí)間:2022年05月08日 10:50:10   作者:不像話i  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多物體運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js菜單代碼js菜單特效代碼

    js菜單代碼js菜單特效代碼

    不用div+css實(shí)現(xiàn)的js菜單特效代碼用js+table實(shí)現(xiàn) 默認(rèn)選中一個(gè),點(diǎn)擊后 選中的項(xiàng)目“變白”。不用css+div 高手給做一下 多謝了 演示站:www.allss.com.cn 演示站使用css+div的 改成js+table的
    2008-01-01
  • Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問(wèn)題

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

    天測(cè)試的測(cè)出來(lái)的。parseInt(1.13*100),實(shí)際返回值是112,下面有個(gè)示例,大家可以看看下
    2014-05-05
  • JavaScript DOM 編程藝術(shù)(第2版)讀書筆記(JavaScript的最佳實(shí)踐)

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

    閱讀了本書第五章關(guān)于使用JavaScript的最佳實(shí)踐,大部分的建議之前都有耳聞,不過(guò)閱讀之后有更深的體會(huì)
    2013-10-10
  • Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼

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

    這篇文章主要介紹了Bootstrap模態(tài)框插入視頻的實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2017-06-06
  • 前端js中的事件循環(huán)eventloop機(jī)制詳解

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

    這篇文章主要給大家介紹了關(guān)于前端js中事件循環(huán)eventloop機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼

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

    這篇文章主要介紹了js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼,涉及javascript操作頁(yè)面元素的布局及屬性的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • js實(shí)現(xiàn)彈出框的拖拽效果實(shí)例代碼詳解

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

    本文通過(guò)實(shí)例代碼給大家介紹了js實(shí)現(xiàn)彈出框的拖拽效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-04-04
  • 最新評(píng)論