为了账号安全,请及时绑定邮箱和手机立即绑定

请各位高手帮忙解决,网上找了挺久,没找到满意的效果。

请各位高手帮忙解决,网上找了挺久,没找到满意的效果。

繁星淼淼 2023-01-03 17:13:32

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

查看完整描述

1 回答

?
哆啦的时光机

TA贡献1550条经验 获得超6个赞

利用闭包实现就可以了..
//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);
}
希望能帮到你

 


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信