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