純js實(shí)現(xiàn)圖片勻速淡入淡出效果
更新時(shí)間：2017年08月22日 11:21:43 作者：diuleilaomo
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
圖片勻速淡入淡出效果如下：
<!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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了webpack處理 css\less\sass 樣式的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
教你修改element-ui源碼給el-dialog添加全屏功能
el-dialog組件提供了fullscreen功能，但是無(wú)法滿(mǎn)足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對(duì)源碼進(jìn)行修改，這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JavaScript計(jì)時(shí)器示例分析,需要的朋友可以參考下2015-02-02
本文給大家分享的是JavaScript制作的一個(gè)兼容IE6+以及主流瀏覽器的分頁(yè)插件，非常的不錯(cuò)，有需要的小伙伴可以參考下2016-09-09
JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果完整示例
這篇文章主要介紹了JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果,結(jié)合完整實(shí)例形式分析了javascript+HTML5 canvas針對(duì)圖片元素的獲取、響應(yīng)鼠標(biāo)事件變換元素屬性相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
js的幾種繼承方式在我們面試的時(shí)候經(jīng)常會(huì)被問(wèn)到，所以深入理解js幾種繼承方式以及它們的優(yōu)缺點(diǎn)是非常有必要的。本文為大家整理了JavaScript中面試?？嫉牧N繼承方式，需要的可以參考一下2023-02-02
基于JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布
本文給大家介紹JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JS代碼實(shí)現(xiàn)百度地圖 畫(huà)圓 刪除標(biāo)注
這篇文章主要介紹了JS代碼實(shí)現(xiàn)百度地圖 畫(huà)圓 刪除標(biāo)注的相關(guān)資料,實(shí)現(xiàn)此功能的設(shè)計(jì)思路非常明確，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2016-10-10
本文主要介紹了js實(shí)現(xiàn)文字超過(guò)顯示寬度每間隔1s自動(dòng)向左滾動(dòng)顯示的跑馬燈效果，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript選擇排序算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript選擇排序算法原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了選擇排序算法的概念、原理并結(jié)合實(shí)例形式分析了JavaScript選擇排序算法的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-08-08