快捷導(dǎo)航

純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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

$webpack處理 css\less\sass 樣式的方法$
webpack處理 css\less\sass 樣式的方法
本篇文章主要介紹了webpack處理 css\less\sass 樣式的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
教你修改element-ui源碼給el-dialog添加全屏功能
el-dialog組件提供了fullscreen功能，但是無法滿足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對源碼進(jìn)行修改，這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下
2022-11-11
JavaScript計(jì)時(shí)器示例分析
這篇文章主要介紹了JavaScript計(jì)時(shí)器示例分析,需要的朋友可以參考下
2015-02-02
JavaScript制作簡單分頁插件
本文給大家分享的是JavaScript制作的一個(gè)兼容IE6+以及主流瀏覽器的分頁插件，非常的不錯(cuò)，有需要的小伙伴可以參考下
2016-09-09
JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果完整示例
這篇文章主要介紹了JavaScript+HTML5 canvas實(shí)現(xiàn)放大鏡效果,結(jié)合完整實(shí)例形式分析了javascript+HTML5 canvas針對圖片元素的獲取、響應(yīng)鼠標(biāo)事件變換元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
JavaScript中六種面試?？祭^承方式總結(jié)
js的幾種繼承方式在我們面試的時(shí)候經(jīng)常會(huì)被問到，所以深入理解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)百度地圖畫圓刪除標(biāo)注
這篇文章主要介紹了JS代碼實(shí)現(xiàn)百度地圖畫圓刪除標(biāo)注的相關(guān)資料,實(shí)現(xiàn)此功能的設(shè)計(jì)思路非常明確，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧
2016-10-10
js實(shí)現(xiàn)文字跑馬燈效果
本文主要介紹了js實(shí)現(xiàn)文字超過顯示寬度每間隔1s自動(dòng)向左滾動(dòng)顯示的跑馬燈效果，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JavaScript選擇排序算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript選擇排序算法原理與實(shí)現(xiàn)方法,簡單分析了選擇排序算法的概念、原理并結(jié)合實(shí)例形式分析了JavaScript選擇排序算法的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08