关于鼠标移上图片变化的效果
只是想做一个简单的移上图片慢慢变大的效果,但现在的代码好象是setTimeout没起作用,后来在调试的时候+了一句alert(x);发现就是在一点一点动了...不知道是哪里问题..希望有人帮帮我这个菜鸟,谢谢~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<script language= "javascript ">
var x=0,y=0;
function change(){
if(event.srcElement.tagName== "IMG "){
bigger();
}
}
function bigger(){
if(x <100){
x++;
y++;
alert(x);//这里加了这句就是一点点变了...
event.srcElement.style.width = 200+x;
setTimeout(bigger(),1000);
}
}
</script>
</head>
<body>
<img src= "logo-shouye.gif " width= "200 " height= "89 " onMouseOver= "change(); ">
</body>
</html>
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<script language= "javascript ">
var x=0,y=0;
function change(){
if(event.srcElement.tagName== "IMG "){
bigger();
}
}
function bigger(){
if(x <100){
x++;
y++;
//alert(x);//这里加了这句就是一点点变了...
document.getElementById( 'img1 ').style.width = 200+x;
setTimeout( "bigger() ",1000);
}
}
</script>
</head>
<body>
<img id= 'img1 ' src= "logo-shouye.gif " width= "200 " height= "89 " onMouseOver= "change(); ">
</body>
</html>
[解决办法]
可以传个ID或者重写setTimeout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<script language= "javascript ">
var x=0,y=0;
function change(str){
if(event.srcElement.tagName== "IMG "){
bigger(str);
}
}
function bigger(str){
var obj=document.getElementById(str)
if(x <100){
x++;
y++;
obj.style.width = parseInt(200)+parseInt(x);
setTimeout( "bigger( ' "+str+ " ') ",10);
}
}
</script>
</head>
<body>
<img src= "http://community.csdn.net/logo/images/prj.210.67.gif " width= "200 " height= "89 " name= "aa " onMouseOver= "change(this.name); ">
</body>
</html>
