JS實(shí)現(xiàn)淡入淡出圖片效果的方法分析
本文實(shí)例講述了JS實(shí)現(xiàn)淡入淡出圖片效果的方法。分享給大家供大家參考，具體如下：
效果：鼠標(biāo)移入時(shí)，圖片由半透明逐漸變成清晰，移出時(shí)，由清晰變?yōu)榘胪该?/p>
分析：用變量來儲存透明度，因?yàn)樵?style.alpha不能直接增加或減少
核心代碼：
window.onload=function(){
var oDiv=document.getElementById("div1");
var timer=null;
var alpha=30;
oDiv.onmouseover=function(){
setAlpha(100);
};
oDiv.onmouseout=function(){
setAlpha(30);
};
function setAlpha(iTarget){ //iTarget目標(biāo)透明度通過參數(shù)傳入
clearInterval(timer); //執(zhí)行計(jì)時(shí)器之前，先清除計(jì)時(shí)器，否則執(zhí)行完一次再執(zhí)行，上次的計(jì)時(shí)器還在，會不停抖動
timer=setInterval(function(){
var iSpeed;
if(alpha<iTarget)
{
iSpeed=10;
}
else
{
iSpeed=-10;
}
if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=iSpeed;
oDiv.style.opacity=alpha/100;
oDiv.style.filter='alpha(opacity:'+alpha+')'
}
},30);
};
};
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
大家在做網(wǎng)站的時(shí)候，經(jīng)常需要在input里面添加小圖標(biāo)功能，看似功能很簡單，但是實(shí)現(xiàn)起來還是有點(diǎn)技巧的，下面小編給大家介紹下JS Input里添加小圖標(biāo)的兩種方法，需要的朋友參考下吧2017-11-11
判斷語句這個(gè)我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下2021-10-10
詳解ES6 export default 和 import語句中的解構(gòu)賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構(gòu)賦值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
這篇文章主要介紹了javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒，需要的朋友可以參考下2015-02-02
JavaScript中的構(gòu)造函數(shù)和實(shí)例對象之間的關(guān)系(構(gòu)造器)
這篇文章主要介紹了JavaScript中的構(gòu)造函數(shù)和實(shí)例對象之間的關(guān)系(構(gòu)造器),需要的朋友可以參考下2023-05-05
js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
本文給大家介紹javascript原型及原型鏈相關(guān)知識，本文分步驟，介紹的非常詳細(xì)，對js原型原型鏈相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序ajax實(shí)現(xiàn)請求服務(wù)器數(shù)據(jù)及模版遍歷數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了微信小程序ajax調(diào)用及模板wx:for循環(huán)列表渲染相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JavaScript父子窗體間的調(diào)用方法,涉及javascript調(diào)用窗體的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12