2021年原生JS实现飘浮关键词特效

本文主要是介绍2021年原生JS实现飘浮关键词特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现飘浮关键词特效</title><style type="text/css">* {margin: 0px;margin: 0px;}body {background: #8a234e url(images/0.jpg) no-repeat center 0;}h1 {text-align: center;color: #fff;font-size: 16px;position: absolute;top: 100px;left: 50%;width: 300px;margin-left: -150px;}#div1 {position: relative;width: 500px;height: 260px;margin: 146px auto 0;overflow: hidden;}#div1 a {position: absolute;color: #000;text-decoration: none;top: 260px;display: block;border: solid 1px #000;background: #fff;filter: alpha(opacity=30);opacity: 0.3;font-size: 14px;padding: 3px 5px;font-family: arial;}#div1 a:hover {filter: alpha(opacity=00);opacity: 1;font-weight: bold;font-size: 16px;}</style><script type="text/javascript">window.onload = function () {var oDiv = document.getElementById('div1');var aA = document.getElementsByTagName('a');var i = 0;for (i = 0; i < aA.length; i++) {aA[i].pause = 1;aA[i].time = null;initialize(aA[i]);aA[i].onmouseover = function () {this.pause = 0;};aA[i].onmouseout = function () {this.pause = 1;};}setInterval(starmove, 24);function starmove() {for (i = 0; i < aA.length; i++) {if (aA[i].pause) {domove(aA[i]);}}}function domove(obj) {if (obj.offsetTop <= -obj.offsetHeight) {obj.style.top = oDiv.offsetHeight + "px";initialize(obj);} else {obj.style.top = obj.offsetTop - obj.ispeed + "px";}}function initialize(obj) {var iLeft = parseInt(Math.random() * oDiv.offsetWidth);var scale = Math.random() * 1 + 1;var iTimer = parseInt(Math.random() * 1500);obj.pause = 0;obj.style.fontSize = 12 * scale + 'px';if ((iLeft - obj.offsetWidth) > 0) {obj.style.left = iLeft - obj.offsetWidth + "px";} else {obj.style.left = iLeft + "px";}clearTimeout(obj.time);obj.time = setTimeout(function () {obj.pause = 1;}, iTimer);obj.ispeed = Math.ceil(Math.random() * 4) + 1;}};</script>
</head><body><div id="div1"><a target="_blank">课程</a><a target="_blank">教程</a><a target="_blank">试听</a><a target="_blank">精品</a><a target="_blank">视频</a><a target="_blank">特效</a></div>
</body></html>

这篇关于2021年原生JS实现飘浮关键词特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！