制作獲取屬性的方法的時候總是效果不對？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
? ? <title></title>
? ?<!-- <script src="getStyle.js"></script>-->
? ? <script>
? ? ? ? function startMove(obj, attr, iTarget, fn) {//獲取樣式的方法（項目，屬性，目標值）
? ? ? ? ? ? //clearInterval(obj.timer);
? ? ? ? ? ? obj.timer = setInterval(function () {
? ? ? ? ? ? ? ? var icur = 0;//現(xiàn)在屬性的值
? ? ? ? ? ? ? ? if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? var icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round 四舍五入的函數(shù)方法。
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? var icur = parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var speed = (iTarget - icur) / 10;
? ? ? ? ? ? ? ? speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ? ? ? ? ? if (icur == iTarget) {
? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? if (fn) {
? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity = (icur + speed) / 100;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.width = icur + speed + 'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30);
? ? ? ? }
? ? ? ? function getStyle(obj, attr) {
? ? ? ? ? ? if (obj.currentStyle) {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? <style>
? ? ? ? ? ? ? #div1 {
? ? ? ? ? ?width:200px;
? ? ? ? ? ?height:200px;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?background:yellow;
? ? ? ? ??
? ? ? ? ?
?}
? ? </style>
? ? <script>
? ? ? ? window.onload = function () {
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? oDiv.onmouseover = function () {
? ? ? ? ? ? ? ? startMove(oDiv, 'width', 400, function () {
? ? ? ? ? ? ? ? ? ? startMove(oDiv, 'height', 400);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? oDiv.onmouseout = function () {
? ? ? ? ? ? ? ? startMove(oDiv, 'width', 200, function () {
? ? ? ? ? ? ? ? ? ? startMove(oDiv,'height',200);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? }
? ? </script>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>
我這個js中寫的 想呈現(xiàn)的效果是 鼠標移進的時候長度先到400px ?然后再高度到400px；鼠標移出的時候長度恢復到200px ?然后高度再到200px；為什么瀏覽器中出現(xiàn)的效果是長度變到400px之后就回來了 ? 然后長度就開始亂跳 ?但是高度從來就不變 ？請懂得人指點一下 謝謝！
2016-08-09
1.obj.style.width = icur + speed + 'px';//這里只能獲取寬度屬性
改成：obj.style[attr]=icur + speed + 'px';