純js實現(xiàn)圖片勻速淡入淡出效果
更新時間：2017年08月22日 11:21:43 作者：diuleilaomo
這篇文章主要為大家詳細介紹了純js實現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
圖片勻速淡入淡出效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入效果</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 2px solid #aaa;
}
img {
width: 300px;
height: 300px;
filter: alpha(opacity:30);
opacity: .3;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="img/timg.jpg" alt="" id="img">
</div>
<script>
var alpha=30;
var img = document.getElementById("img");
img.onmouseover=function(){
startMove(100)
};
img.onmouseout=function(){
startMove(30)
}
var timer;
function startMove(tar) {
var img = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function () {
var ispeed=0;
ispeed= alpha<tar?5:-5;
if(alpha==tar){
clearInterval(timer)
}
else{
alpha+=ispeed;
img.style.filter="alpha(opacity:"+alpha+")";
img.style.opacity=alpha/100;
}
}, 30)
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
關于JavaScript使用export和import的兩個報錯解決
說來慚愧es6寫了這么久,連最基本的export和import都沒搞明白,下面這篇文章主要給大家介紹了關于JavaScript使用export和import的兩個報錯的解決方法,需要的朋友可以參考下2022-07-07
使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法
這篇文章主要介紹了使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章為大家主要介紹了js獲取url參數(shù)值的幾種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
jsp js鼠標移動到指定區(qū)域顯示選項卡離開時隱藏示例
jsp js 鼠標移動到指定區(qū)域顯示選項卡示例,離開時隱藏，具體實現(xiàn)代碼如下，感興趣的朋友可以了解下哈，希望對你有所幫助2013-06-06
JS清除文本框內(nèi)容離開在恢復及鼠標離開文本框時觸發(fā)js的方法
多網(wǎng)站的需要填寫的文本框在默認狀態(tài)下都會給出一個默認的提示語言，當鼠標點擊此文本框的時候能夠?qū)⒗锩娴哪J文本清除，當刪除輸入的文本且焦點離開文本框的時候再將默認的文本寫入文本框2016-01-01
http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域
這篇文章主要為大家介紹了http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本文主要介紹了js實現(xiàn)返回頂部效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
在js的嵌套for循環(huán)異步執(zhí)行,聲明i和使用i獲取到的變量 都要用 let 聲明,不要用var,這篇文章主要介紹了JS的for循環(huán)中的var和let,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了微信小程序全屏滾動字幕的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
23個Javascript彈出窗口特效，需要的朋友可以參考下。2011-02-02