<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
/*#div1{ height:100px; 100px; position:absolute; --left:800px; margin-top:90px; background-color:red;}
span { height:300px; 1px; position:absolute; left:500px; background-color:black; }*/
div { height:100px; 100px; margin-top:50px; background-color:red; }
</style>
<script type="text/javascript">
window.onload = function () {
//var oBtn = document.getElementById('btn1');
//oBtn.onclick = function () {
// starMove(400);
//}
var oDiv = document.getElementsByTagName('div');
//var i = 0;
//for (i = 0; i < oDiv.length; i++) {
//}
oDiv[0].onmouseover = function () {
starMove(this, 'width', 300);
}
oDiv[0].onmouseout = function () {
starMove(this, 'width', 100);
}
oDiv[1].onmouseover = function () {
starMove(this, 'height', 300);
}
oDiv[1].onmouseout = function () {
starMove(this, 'height', 100);
}
oDiv[2].onmouseover = function () {
starMove(this, 'opacity', 30);
}
oDiv[2].onmouseout = function () {
starMove(this, 'opacity', 100);
}
}
window.onscroll = function () {
var scroTop = document.documentElement.scrollHeight || document.body.scrollTop;
}
//获取样式数值
function getStyle(obj, attr)
{
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
}
var iSpeed=0;
function starMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
var iCur = 0;
obj.timer = setInterval(function () {
//parseInt(parseFloat(getStyle(obj, attr)) * 100)中 parseFloat(getStyle(obj, attr)为取带小数的opacity值
//parseInt(...) 目的为 解决计算机小数问题bug 防止3.0000000000001=3 类似问题
iCur = attr == "opacity" ? parseInt(parseFloat(getStyle(obj, attr)) * 100) : parseInt(getStyle(obj, attr));
//iCur = parseInt(getStyle(obj, attr));
iSpeed =(iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == "opacity") {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}, 30);
}
</script>
</head>
<body>
<!--<input type="button" id="btn1" value="开始" /><br />
<div id="div1"></div>
<span></span>-->
<div></div>
<div></div>
<div></div>
</body>
</html>