JQuery或者js实现闪光字 多种方法好好网亲测
效果再右侧。
实现闪光字有很多方法,下面我一个一个方法来说
方法一:
这里使用的是JQuery,因此要导入JQuery的包
<div class="name" style="color: rgb(255, 0, 0);">你好,好好网!</div>
<script>function index(){
$('.name').css('color','#03a9f4'); //默认值
setTimeout(" $('.name').css('color','#fF0000')",100); //第一次闪烁
setTimeout( "$('.name').css('color','#ccc')",200); //第二次闪烁
};
window.setInterval(index, 400); //让index 多久循环一次 </script></body>
方法二:
这里使用的是js方式
<div id="hitokoto" >你好,好好网!</div>
<script language="javascript">
function changeColor(){
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color=color.split("|");
document.getElementById("hitokoto").style.color=color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()",200);
</script>
实现的原理就是利用定时器,不断的给文字赋予颜色,这样展示的效果就是闪光字的了。同样的道理,要是实现一个动态的东西,亦可以使用css样式,动态的赋值,就可以改变他的样式。此外js,Jquery是浏览器端实现的,因此不浪费服务器的资源。
正文到此结束(点击广告是对作者最大的支持)