<!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對象
?* @param {*} attrObj 要改變的所有元素的屬性形成的對象
?* @param {*} target 改變的目標值
?* @returns?
?*/
function startMove(dom, attrObj, callback) {
? ? var timer = null;
? ? var speed = null;
? ? // 元素屬性的當前值
? ? var iCur = null;
? ? return function() {
? ? ? ? clearInterval(dom.timer);
? ? ? ? dom.timer = setInterval(function() {
? ? ? ? ? ? var flag = true;
? ? ? ? ? ? // 0. 循環(huán)遍歷改變的屬性對象 將每一個屬性的形態(tài)都進行運動
? ? ? ? ? ? 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) ?如果是負值 向下取整(-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所有屬性是否到達目標值
? ? ? ? ? ? ? ? if (iCur !== attrObj[param]) {
? ? ? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? // 所有屬性值都到了目標階段 可以清除定時器
? ? ? ? ? ? ? ? clearInterval(dom.timer);
? ? ? ? ? ? ? ? //?
? ? ? ? ? ? ? ? typeof callback === 'function' && callback();
? ? ? ? ? ? }
? ? ? ? ? ? // 上一個屬性運動結束之后 再讓下一個屬性開始運行
? ? ? ? ? ? // 讓一個屬性的目標值到達就停止定時器
? ? ? ? }, 60)
? ? }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: