JS原生实现按钮发光效果，呼吸灯，兼容ie，谷歌

浏览：1350次- 评论：0次- 发布时间：2018-05-19

Html

Css

window.onload = function() {
  var oBtn = document.getElementById('go');
  var oBtn2 = document.getElementById('go2');
  var t = null;
  var alpha = 0;
  var bShow = true;
  var ray = '';
  ray = setInterval(function() {
    if (bShow) {
      rayMove(100);
    } else {
      rayMove(0);
    }

bShow = !bShow;

function rayMove(iTarget) {
      if (t) clearInterval(t);
      t = setInterval(function() {
        doMove(iTarget);
      }, 30);
    }

function doMove(iTarget) {
        var iSpeed = 0;
        if (alpha < iTarget) {
          iSpeed = 2;
        } else {
          iSpeed = -2;
        }
        alpha += iSpeed;

oBtn2.style.filter = "alpha(opacity:" + alpha + ")";
        oBtn2.style.opacity = alpha / 100;
    }
  }, 2000);
  oBtn2.onmouseover = function() {
    clearInterval(ray);
  }
  oBtn2.onmouseout = function() {
    ray = setInterval(function() {
      if (bShow) {
        rayMove(100);
      } else {
        rayMove(0);
      }

bShow = !bShow;

function rayMove(iTarget) {
        if (t) clearInterval(t);
        t = setInterval(function() {
          doMove(iTarget);
        }, 30);
      }

function doMove(iTarget) {
        var iSpeed = 0;
        if (alpha < iTarget) {
          iSpeed = 2;
        } else {
          iSpeed = -2;
        }
        alpha += iSpeed;

oBtn2.style.filter = "alpha(opacity:" + alpha + ")";
        oBtn2.style.opacity = alpha / 100;
    }
    }, 2000);
  }
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：利用js原生实现呼吸灯的效果，摆脱了html5和css3不兼容的麻烦，效果可延伸，扩展。

doMove(iTarget)函数里的2000表示呼吸灯频率，其余的修改样式即可。

感谢平台，入行初期平台的插件帮了很多忙，现在略懂皮毛，自己写的希望大家喜欢

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取