核心提示：HTML：!DOCTYPE htmlhtml head meta charset=UTF-8 / title/title/headbody input type=text name=txt1 = id...
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<input type="text" name="txt1" "="" id="txt1" value="" />
<p id="p1">
变高
</p>
<p id="p2">
变宽
</p>
<p id="p3">
透明度
</p>
<p id="p4">
字体大小
</p>
<p id="p5">
边框
</p>
</body>
</html>
CSS：
* {
margin: 0;
}
p {
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 2px solid red;
/*padding:5px;*/
float: left;
margin: 10px;
/*position: absolute;*/
/*left:20px;
top:30px;*/
}
#p3 {
/*IE9-11、火狐和谷歌用opacity*/
opacity: 0.5;
/*IE用6-8的是filter*/
filter: alpha(opacity:50);
}
JavaScript：
window.onload = function() {
var oDiv1 = document.getElementById('p1');
var oDiv2 = document.getElementById('p2');
var oDiv3 = document.getElementById('p3');
var oDiv4 = document.getElementById('p4');
var oDiv5 = document.getElementById('p5');
var oTxt1 = document.getElementById('txt1');
//offsetWidth和offsetHeight,获取的都是对象的盒模型（宽、border、padding）
//offsetWidth=width+border+padding
//offsetHeight=height+border+padding
//所以我们如果用obj.style.width，但是它只能获取行间的样式，不能获取非行间样式（即样式表里的样式）
//getStyle完全不考虑border、padding的大小
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name]; // IE用
} else {
return getComputedStyle(obj, false)[name]; // 火狐和谷歌用
}
}
oDiv1.onmouseover = function() {
startMove(oDiv1, 'height', 200);
}
oDiv1.onmouseout = function() {
startMove(oDiv1, 'height', 100);
}
oDiv2.onmouseover = function() {
startMove(oDiv2, 'width', 200);
}
oDiv2.onmouseout = function() {
startMove(oDiv2, 'width', 100);
}
oDiv3.onmouseover = function() {
startMove(oDiv3, 'opacity', 100);
}
oDiv3.onmouseout = function() {
startMove(oDiv3, 'opacity', 50);
}
oDiv4.onmouseover = function() {
startMove(oDiv4, 'fontSize', 40);
}
oDiv4.onmouseout = function() {
startMove(oDiv4, 'fontSize', 18);
}
oDiv5.onmouseover = function() {
startMove(oDiv5, 'borderWidth', 20);
}
oDiv5.onmouseout = function() {
startMove(oDiv5, 'borderWidth', 1);
}
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
var speed = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
oTxt1.value = cur;
} else {
cur = parseInt(getStyle(obj, attr));
}
speed = (iTarget - cur) / 6;
speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == 'opacity') {
obj.style[attr] = (cur + speed) / 100;
obj.style.filter = 'alpha:(opacity:' + (cur + speed) / 100 + ')';
} else {
obj.style[attr] = (cur + speed) + 'px';
}
}
},
30);
}
}
