首頁猿問請各位高手幫忙解決，網(wǎng)上找了挺久，...

請各位高手幫忙解決，網(wǎng)上找了挺久，沒找到滿意的效果。

JavaScript

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

我是想用JavaScript實(shí)現(xiàn)圖片淡入的效果（從沒有->模糊->清晰）。具體需求就是，我是想在表格中顯示圖片，但是又為了不太影響表格中的布局（圖片一般比較大，很占位置），我就想把表格中的圖片長寬設(shè)置小一點(diǎn)，比如（5px，5px），然后鼠標(biāo)放在那張圖片上的時(shí)候，就在該圖片的右上角完全顯示該圖片（以淡入的方式出現(xiàn)，最好是也能控制顯示的大小，但是絕對要比原圖片大，起碼能不太影響圖片的觀看效果），然后鼠標(biāo)移出原圖片（小圖片）時(shí)，大圖片再淡出。

查看完整描述

1 回答

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

利用閉包實(shí)現(xiàn)就可以了..
//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>
//其實(shí)這個(gè)問題我很久之前有做過...實(shí)現(xiàn)淡入的方法很簡單...但是淡出..不知道為什么..用同樣的方法總是不行...
其實(shí)一樓說的jquery很容易實(shí)現(xiàn)..我早上也查了一下jquery
原碼..當(dāng)時(shí)是查的hide和show..不過它是通過其他的函數(shù)來實(shí)現(xiàn)的.fade倒是沒有找到....今天看到你的問題我重新做了一次...還是那個(gè)問題...后來用變量跟蹤發(fā)現(xiàn)...hide函數(shù)i被捕獲后..p確實(shí)=i.但是進(jìn)入setTimeout函數(shù)后.它就會(huì)變成100-P....所以hide函數(shù)我給他改成了100-p....但是具體的原因我也很郁悶...
后來用interval的方法來實(shí)現(xiàn)....就不存在這個(gè)問題了...
//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);
}
希望能幫到你