js冒泡的文字云标签特效代码
稿源: 原创
这是一款js文字标签云类似缓缓上升气泡效果文字云标签动画代码。
使用方法
在页面引入相关JS代码
<script> 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, 50); 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>
CSS样式
CSS样式自己可以随意修改,我只简单写了一些。
<style> * { margin: 0px; margin: 0px; } body { background: #dddddd; } h1 { text-align: center; color: #7b7b7b; font-size: 30px; position: absolute; top: 100px; left: 50%; width: 300px; margin-left: -150px; } #div1 { position: relative; width: 990px; height: 260px; margin: 146px auto 0; overflow: hidden; box-shadow: 0 0 50px #8e8e8e; -webkit-box-shadow: 0 0 50px #8e8e8e; -moz-box-shadow: 0 0 50px #8e8e8e; } #div1 a { position: absolute; color: #8e8e8e; text-decoration: none; top: 260px; display: block; border: #8e8e8e 1px solid; box-shadow: 0 0 5px #8e8e8e; -webkit-box-shadow: 0 0 5px #8e8e8e; -moz-box-shadow: 0 0 5px #8e8e8e; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; font-size: 14px; padding: 3px 5px; font-family: arial; } #div1 a:hover { filter: alpha(opacity: 100); opacity: 1; font-weight: bold; font-size: 16px; } </style>
相关插件