我是想用JavaScript实现图片淡入的效果（从没有->模糊->清晰）。
具体需求就是，我是想在表格中显示图片，但是又为了不太影响表格中的布局（图片一般比较大，很占位置），我就想把表格中的图片长宽设置小一点，比如（5px，5px），然后鼠标放在那张图片上的时候，就在该图片的右上角完全显示该图片（以淡入的方式出现，最好是也能控制显示的大小，但是绝对要比原图片大，起码能不太影响图片的观看效果），然后鼠标移出原图片（小图片）时，大图片再淡出。
请各位高手帮忙解决，网上找了挺久，没找到满意的效果。
利用闭包实现就可以了..
//settimeout
<script>
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function setOpacity(elem,num){
if(elem.filters){
return elem.style.filter='alpha(opacity='+num+')';
}else{
return elem.style.opacity=parseFloat(num/100);
}
}
function show(){
var $this=this;
for( var i=0;i<=100;i++){
(function(){
//catch i;
var p=i;
setTimeout(function(){
setOpacity($this,p);
},p*2);
})();
}
}
function hide(){
var $this=this;
for(var i=100;i>=0;i--){
(function(){
//catch i;
var p=i;
setTimeout(function(){
setOpacity($this,100-p);
},p/2);
})();
}
}
</script>
<style>
#test{
width:200px;
height:200px;
background:#ff0099;
*filter:alpha(opacity=0);
opacity:0;
}
</style>
<body>
<div id='test'></div>
</body>
//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...
其实一楼说的jquery很容易实现..我早上也查了一下jquery 原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...
后来用interval的方法来实现....就不存在这个问题了...
//setinterval
var i=0;
var showID;
var hideID;
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function setOpacity(elem,num){
if(elem.filters){
return elem.style.filter='alpha(opacity='+num+')';
}else{
return elem.style.opacity=parseFloat(num/100);
}
}
function show(){
var $this=this;
showID=setInterval(function(){
if(i<100){
setOpacity($this,i);
i+=5;
}else{
clearInterval(showID);
}
},10);
}
function hide(){
var $this=this;
hideID=setInterval(function(){
if(i>=0){
setOpacity($this,i);
i-=5;
}else{
clearInterval(hideID);
}
},10);
}
希望能帮到你
//settimeout
<script>
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function setOpacity(elem,num){
if(elem.filters){
return elem.style.filter='alpha(opacity='+num+')';
}else{
return elem.style.opacity=parseFloat(num/100);
}
}
function show(){
var $this=this;
for( var i=0;i<=100;i++){
(function(){
//catch i;
var p=i;
setTimeout(function(){
setOpacity($this,p);
},p*2);
})();
}
}
function hide(){
var $this=this;
for(var i=100;i>=0;i--){
(function(){
//catch i;
var p=i;
setTimeout(function(){
setOpacity($this,100-p);
},p/2);
})();
}
}
</script>
<style>
#test{
width:200px;
height:200px;
background:#ff0099;
*filter:alpha(opacity=0);
opacity:0;
}
</style>
<body>
<div id='test'></div>
</body>
//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...
其实一楼说的jquery很容易实现..我早上也查了一下jquery 原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...
后来用interval的方法来实现....就不存在这个问题了...
//setinterval
var i=0;
var showID;
var hideID;
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function setOpacity(elem,num){
if(elem.filters){
return elem.style.filter='alpha(opacity='+num+')';
}else{
return elem.style.opacity=parseFloat(num/100);
}
}
function show(){
var $this=this;
showID=setInterval(function(){
if(i<100){
setOpacity($this,i);
i+=5;
}else{
clearInterval(showID);
}
},10);
}
function hide(){
var $this=this;
hideID=setInterval(function(){
if(i>=0){
setOpacity($this,i);
i-=5;
}else{
clearInterval(hideID);
}
},10);
}
希望能帮到你
温馨提示：答案为网友推荐，仅供参考
第1个回答 2010-05-11
用jquery应该可以实现.
第2个回答 2020-06-13
利用闭包实现就可以了..
//settimeout
<script>
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function
setOpacity(elem,num){
if(elem.filters){
return
elem.style.filter='alpha(opacity='+num+')';
}else{
return
elem.style.opacity=parseFloat(num/100);
}
}
function
show(){
var
$this=this;
for(
var
i=0;i<=100;i++){
(function(){
//catch
i;
var
p=i;
setTimeout(function(){
setOpacity($this,p);
},p*2);
})();
}
}
function
hide(){
var
$this=this;
for(var
i=100;i>=0;i--){
(function(){
//catch
i;
var
p=i;
setTimeout(function(){
setOpacity($this,100-p);
},p/2);
})();
}
}
</script>
<style>
#test{
width:200px;
height:200px;
background:#ff0099;
*filter:alpha(opacity=0);
opacity:0;
}
</style>
<body>
<div
id='test'></div>
</body>
//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...
其实一楼说的jquery很容易实现..我早上也查了一下jquery
原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...
后来用interval的方法来实现....就不存在这个问题了...
//setinterval
var
i=0;
var
showID;
var
hideID;
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function
setOpacity(elem,num){
if(elem.filters){
return
elem.style.filter='alpha(opacity='+num+')';
}else{
return
elem.style.opacity=parseFloat(num/100);
}
}
function
show(){
var
$this=this;
showID=setInterval(function(){
if(i<100){
setOpacity($this,i);
i+=5;
}else{
clearInterval(showID);
}
},10);
}
function
hide(){
var
$this=this;
hideID=setInterval(function(){
if(i>=0){
setOpacity($this,i);
i-=5;
}else{
clearInterval(hideID);
}
},10);
}
希望能帮到你
//settimeout
<script>
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function
setOpacity(elem,num){
if(elem.filters){
return
elem.style.filter='alpha(opacity='+num+')';
}else{
return
elem.style.opacity=parseFloat(num/100);
}
}
function
show(){
var
$this=this;
for(
var
i=0;i<=100;i++){
(function(){
//catch
i;
var
p=i;
setTimeout(function(){
setOpacity($this,p);
},p*2);
})();
}
}
function
hide(){
var
$this=this;
for(var
i=100;i>=0;i--){
(function(){
//catch
i;
var
p=i;
setTimeout(function(){
setOpacity($this,100-p);
},p/2);
})();
}
}
</script>
<style>
#test{
width:200px;
height:200px;
background:#ff0099;
*filter:alpha(opacity=0);
opacity:0;
}
</style>
<body>
<div
id='test'></div>
</body>
//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...
其实一楼说的jquery很容易实现..我早上也查了一下jquery
原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...
后来用interval的方法来实现....就不存在这个问题了...
//setinterval
var
i=0;
var
showID;
var
hideID;
window.onload=function(){
document.getElementById('test').onmouseover=show;
document.getElementById('test').onmouseout=hide;
}
function
setOpacity(elem,num){
if(elem.filters){
return
elem.style.filter='alpha(opacity='+num+')';
}else{
return
elem.style.opacity=parseFloat(num/100);
}
}
function
show(){
var
$this=this;
showID=setInterval(function(){
if(i<100){
setOpacity($this,i);
i+=5;
}else{
clearInterval(showID);
}
},10);
}
function
hide(){
var
$this=this;
hideID=setInterval(function(){
if(i>=0){
setOpacity($this,i);
i-=5;
}else{
clearInterval(hideID);
}
},10);
}
希望能帮到你
