300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > js - 03课-01 隔行变色 鼠标移入移出变色

js - 03课-01 隔行变色 鼠标移入移出变色

时间:2021-03-25 04:42:23

相关推荐

js - 03课-01  隔行变色  鼠标移入移出变色

1. 效果图

2. 源码

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>li { height:24px; margin-bottom:3px; list-style:none; }</style></head><body><ul id="ul1"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><script>window.onload = function(){var aLi = document.getElementsByTagName('li')var arrColor = ['red','yellow','blue']for(var i=0; i < aLi.length; i++){aLi[i].index = i;aLi[i].style.background = arrColor[i % arrColor.length]aLi[i].onmouseover = function(){this.style.background = 'gray';}aLi[i].onmouseout = function(){this.style.background = arrColor[this.index % arrColor.length]}}}</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。