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

Html

Css

* {
	margin:0;
	padding:0;
}
.main {
	position:absolute;
	left:40%;
	top:30%;
	margin:0 auto;
	overflow:hidden;
	height:500px;
	width:500px;
}
.go {
	position:absolute;
	width:379px;
	height:370px;
	background:url(http://www.jq22.com/tp/1c5534be-181f-48ab-8990-6a99449630b2.png) no-repeat;
	filter:alpha(opacity:100);
	opacity:1;
	left:0;
	top:0;
}
#go3 li {
	width:60px;
	height:30px;
	background:#fff;
	filter:alpha(opacity:0);
	opacity:0;
	float:left;
	list-style:none;
	margin-left:50px;
}
.active {
	position:absolute;
	width:379px;
	height:370px;
	left:0;
	top:0;
	background:url(http://www.jq22.com/tp/3c12a70d-01a8-48f4-b1f5-4dd7e022e782.png) no-repeat;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:2;
}

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

立即下载

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



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

doMove(iTarget)函数里的2000表示呼吸灯频率，其余的修改样式即可。
感谢平台，入行初期平台的插件帮了很多忙，现在略懂皮毛，自己写的希望大家喜欢

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

┵小磊吖??

相关代码