javascript 图片在指定位置淡入淡出

我是想用JavaScript实现图片淡入的效果（从没有->模糊->清晰）。具体需求就是，我是想在表格中显示图片，但是又为了不太影响表格中的布局（图片一般比较大，很占位置）... 我是想用JavaScript实现图片淡入的效果（从没有->模糊->清晰）。
具体需求就是，我是想在表格中显示图片，但是又为了不太影响表格中的布局（图片一般比较大，很占位置），我就想把表格中的图片长宽设置小一点，比如（5px，5px），然后鼠标放在那张图片上的时候，就在该图片的右上角完全显示该图片（以淡入的方式出现，最好是也能控制显示的大小，但是绝对要比原图片大，起码能不太影响图片的观看效果），然后鼠标移出原图片（小图片）时，大图片再淡出。
请各位高手帮忙解决，网上找了挺久，没找到满意的效果。展开

 我来答

3个回答

#热议# 普通体检能查出癌症吗？

jsyczhanghao
2010-05-11 · TA获得超过566个赞

知道小有建树答主

回答量：226

采纳率：0%

帮助的人：270万

我也去答题访问个人页

关注

展开全部

利用闭包实现就可以了..

//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);
}

希望能帮到你

本回答由提问者推荐

已赞过 已踩过<

评论收起

hotdigger
2010-05-11 · TA获得超过3590个赞

知道大有可为答主

回答量：1458

采纳率：50%

帮助的人：627万

我也去答题访问个人页

关注

展开全部

用jquery应该可以实现.

已赞过 已踩过<

评论收起

招之赏方方
2020-06-13 · TA获得超过3738个赞

知道大有可为答主

回答量：3119

采纳率：26%

帮助的人：199万

我也去答题访问个人页

关注

展开全部

利用闭包实现就可以了..
//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）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 图片在指定位置淡入淡出

其他类似问题

为你推荐：