变宽，变高，字号改变，透明度改变
优点：只要调用move()即可实现以上功能
缺点：一个对象只能同时执行一种运动，因为obj.timer只有一个
ex
divs[0].onmouseover = function(){
move(this, "width", 200);
move(this, "height", 200); // 执行这个时会把move(this, "width", 200);的timer关掉
}
move.js
/**
* Created by admin on 2017/3/20.
*/
/**
*
* @param obj 运动的对象
* @param attr 运动的对象需要改变的属性
* @param target 目标点 宽度 高度 字号 都是int类型 对于透明度 这是float类型
*/
function move(obj, attr, target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(attr == "opacity")
var cur = parseFloat(getStyle(obj, attr))*100;
else
var cur = parseInt(getStyle(obj, attr));
var speed = (target - cur)/6;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(cur == target){
clearInterval(obj.timer);
console.log(obj + "---" + attr+ " to " +target+ " is over ");
}else{
if(attr == "opacity")
obj.style[attr] = (cur + speed)/100;
else
obj.style[attr] = (cur + speed) + "px";
}
}, 30)
}
/**
* 获取行间/内联/外部样式，无法设置
* @param obj
* @param attr
*/
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>运动框架</title>
<script src="js/move.js"></script>
<style>
body{
background-color: #cccccc;
}
div{
width: 100px;
height: 100px;
background-color: crimson;
border: 2px solid white;
margin: 10px;
float: left;
color: white;
text-align: center;
line-height: 100px;
font-size: 15px;
}
div:last-of-type{
opacity: 0.3;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("div");
divs[0].onmouseover = function(){
move(this, "width", 200);
}
divs[0].onmouseout = function(){
move(this, "width", 100);
}
divs[1].onmouseover = function(){
move(this, "height", 200);
}
divs[1].onmouseout = function(){
move(this, "height", 100);
}
divs[2].onmouseover = function(){
move(this, "fontSize", 30);
}
divs[2].onmouseout = function(){
move(this, "fontSize", 15);
}
divs[3].onmouseover = function(){
move(this, "opacity", 100);
}
divs[3].onmouseout = function(){
move(this, "opacity", 30);
}
}
</script>
</head>
<body>
<div>变宽</div>
<div>变高</div>
<div>字号</div>
<div>透明度</div>
</body>
</html>
效果
QQ图片20170320100936.png
网友评论