寬度變化后可正常彈出窗口就是不能改變高度呢？什么情況呢這是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咋地呢</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #0C6;
width: 150px;
height: 50px;
margin-top: 20px;
cursor: pointer;
border: solid 2px #000;
filter: alpha(opacity : 30);
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++) {
div[i].timer = null;
div[i].onmouseover = function() {
startmove(this, 'width', 600,function(){
//alert("dd");
startmove(this,'height',150);
});
}
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
};
function startmove(obj, attr, itarget,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (itarget - icur) / 5;
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[attr] = icur + speed + 'px';
}
}
}, 30);
}
}
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
2016-08-21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咋地呢</title>
</head>
<style>
//樣式
* {
margin: 0;
padding: 0;
}
div {
background-color: #0C6;
width: 150px;
height: 50px;
margin-top: 20px;
cursor: pointer;
border: solid 2px #000;
filter: alpha(opacity : 30);
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++) {
div[i].timer = null;
div[i].onmouseover = function() {
startmove(this, 'width', 600,function(){
//alert("dd");
startmove(this,'height',150);//此this指向window，可以去下面的回調函數那看看，他是直接調用的fn()
}.bind(this));//我用bind永久綁定this為當前div[i]
}
}
//獲得計算后的樣式
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}?
else {
return getComputedStyle(obj,false)[attr];
}
}
//
function startmove(obj, attr, itarget,fn) {
//對象，屬性，當前屬性值，回調函數
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//判斷是透明度還是其他屬性
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}?
else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (itarget - icur) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//如果運動的屬性值等于當前值
if (icur == itarget) {
clearInterval(obj.timer);
if(fn){
fn();//前面沒有加點(.)等同于window.fn()
}
}?
else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + speed)
+ ')';
obj.style.opacity = (icur + speed) / 100;
}?
else {
obj.style[attr] = icur + speed + 'px';
}
}
}, 30);
}
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
這是你原來的代碼我給你改過來的，邏輯沒問題，是里面的this出問題了，
this要特別小心，我總結this的個人心得：誰調用this指向誰（也就是.（點）前的對象），沒人調用this指向window，回調和自調函數this一般都是指向window，如果this不是自己想要的，就用bind綁定this
2016-08-11
邏輯錯誤！在檢查一遍！