多个元素运动
注意：多个元素，定时器需要多个。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {width: 50px;height: 50px;background: red;margin: 20px;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
window.onload = function () {
var aDiv = document.getElementsByTagName('div')
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer = null; //每个元素都有各自对应的定时器
aDiv[i].onmouseover = function () {
startMove(this, '400')
}
aDiv[i].onmouseout = function () {
startMove(this, '50')
}
}
}
function startMove(obj, iTarget) { //将元素作为参数传入
clearInterval(obj.timer) //移除该元素上的定时器
obj.timer = setInterval(function () {
var speed = (iTarget - obj.offsetWidth) / 6
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
if (obj.offsetWidth == iTarget) {
clearInterval(obj.timer)
} else {
obj.style.width = obj.offsetWidth + speed + 'px'
}
}, 30)
}
</script>
</body>实例1、改变多个物体的透明度
多个元素运动中，所有的东西都不能共用，如果需要要定义成元素的属性。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {width: 150px;height: 150px;background: red;margin: 20px;float: left;opacity: 0.3;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
window.onload = function () {
var aDiv = document.getElementsByTagName('div')
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].alpha = 30 //多元素运动中，所有的东西都不能公用，需要定义成元素的属性
aDiv[i].timer = null; //每个元素都有各自对应的定时器
aDiv[i].onmouseover = function () {
startMove(this, 100)
}
aDiv[i].onmouseout = function () {
startMove(this, 30)
}
}
}
function startMove(obj, iTarget) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var speed = (iTarget - obj.alpha) / 3
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
if (obj.alpha == iTarget) {
clearInterval(obj.timer)
} else {
console.log(speed)
obj.alpha = obj.alpha + speed
obj.style.opacity = (obj.alpha) / 100
}
}, 30)
}
</script>
</body>任意值运动框架
任意改变元素 宽度、高度、字号大小、border大小等，可以设置 px 的属性，以及 opacity。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px; height: 150px; background: yellow; margin: 20px; float: left;
}
</style>
</head>
<body>
<div id="div1">变宽</div>
<div id="div2">变高</div>
<div id="div3">改变字号</div>
<div id="div4">改变透明度</div>
<script>
window.onload = function () {
var oDiv1 = document.getElementById('div1')
var oDiv2 = document.getElementById('div2')
var oDiv3 = document.getElementById('div3')
var oDiv4 = document.getElementById('div4')
oDiv1.onmouseover = function () {
startMove(this,'width', 1000)
}
oDiv1.onmouseout = function () {
startMove(this,'width', 300)
}
oDiv2.onmouseover = function () {
startMove(this,'height',1000)
}
oDiv2.onmouseout = function () {
startMove(this,'height', 300)
}
oDiv3.onmouseover = function () {
startMove(this,'fontSize',100)
}
oDiv3.onmouseout = function () {
startMove(this,'fontSize',30)
}
oDiv4.onmouseover = function () {
startMove(this,'opacity',100)
}
oDiv4.onmouseout = function () {
startMove(this,'opacity',30)
}
}
function getStyle(obj, name) { //获取非行间样式
if (obj.currentStyle) {
return obj.currentStyle[name]
} else {
return getComputedStyle(obj, false)[name]
}
}
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var cur = 0
if(attr == 'opacity'){ //判断为 opacity 时
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
}
else{
cur = parseInt(getStyle(obj, attr))
}
var speed = (iTarget - cur) / 6
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
if (cur == iTarget) {
clearInterval(obj.timer)
} else {
if(attr == 'opacity'){
obj.style.opacity = (cur + speed) / 100
}else{
obj.style[attr] = cur + speed + 'px'
}
}
}, 30)
}
</script>
</body>