宽度变化后可正常弹出窗口就是不能改变高度呢？什么情况呢这是
善良阿呆
2016-08-11 13:15
<!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>
2回答
-
- 我学C语言
- 2016-08-21 11:20:52
<!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
-
- SapereAudor
- 2016-08-11 15:39:48
逻辑错误！在检查一遍！
JS动画效果
113924 学习 · 1443 问题
相似问题