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>

时间： 2024-10-25 21:27:24

js - 03课-01 隔行变色, 鼠标移入移出变色的相关文章

jQuery table tr隔行变色，鼠标移入移出变色，鼠标点击变色

.trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .trodd{ background:#ffffff; } $(function () { //鼠标移入该行和鼠标移除该行的事件 jQuery("#ajaxTable tr:gt(0)").mouseover(function () { jQuery(this).addClass("

JS添加、设置属性以及鼠标移入移出事件

源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; } #wk{ width:100px; } .pname{ width: 100px; height: 50px; line-height: 50p

js鼠标移入移出效果【原】

<HTML> <HEAD>  <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>js鼠标移入移出效果</TITLE> <style> *{ margin:2;paddin

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_

[读码时间] 图片列表：鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

展现与收起效果（鼠标移入移出）

效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出展现与收起效果</title> <style type="text/css"> body{ margin: 0 auto; padding: 0; } #pn{ background: #