首页 > 代码库 > 常用事件【由浅入深】1

常用事件【由浅入深】1

2024-09-11 12:51:49   215人阅读

---恢复内容开始---

一。点击变色并提示索引

技术分享html 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="StyleSheet.css" rel="stylesheet" />
 7     <style type="text/css"></style>
 8 </head>
 9 <body>
10     <div class="d1"></div>
11     <div class="d1"></div>
12     <div class="d1"></div>
13     <div class="d1"></div>
14     <div class="d1"></div>
15     <div class="d1"></div>
16 </body>
17 </html>
18 <script type="text/javascript">
19     //找到操作对象
20     var a = document.getElementsByClassName("d1");
21     //for循环遍历数组
22     for (var x = 0; x < a.length; x++) {
23         //找到对应索引
24         a[x].index = x;
25         //点击事件
26         a[x].onclick = function () {
27             //变色
28             this.style.backgroundColor = "blue";
29             //弹出索引
30             alert(this.index);
31         }
32     }
33 
34 </script>

技术分享 
1 .d1 {
2     float: left;
3     width: 100px;
4     height: 30px;
5     margin-left: 10px;
6     background-color:red;
7 }
css

 二。选项卡

技术分享选项卡HTML
技术分享选项卡 
 1 .d1 {
 2     float: left;
 3     width: 100px;
 4     height: 30px;
 5     margin-left: 10px;
 6     position: relative;
 7     background-color: red;
 8 }
 9 
10 .d2 {
11     width: 100px;
12     height: 500px;
13     background-color: pink;
14     position: absolute;
15     top: 100px;
16     display:none;
17 }
css

三。移入变色，移出变色，点击变色（移出不变色）

技术分享 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="StyleSheet.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9 
10     <div class="d1">
11     </div>
12     <div class="d1">
13     </div>
14     <div class="d1">
15     </div>
16     <div class="d1">
17     </div>
18     <div class="d1">
19     </div>
20 </body>
21 </html>
22 <script type="text/javascript">
23     //操作对象
24     var a = document.getElementsByClassName("d1");
25     for (var y = 0; y < a.length; y++) {
26         //记录索引
27         a[y].index = y;
28         //移入事件
29         a[y].onmouseover = function () {
30             //判断颜色
31             if (a[this.index].style.backgroundColor != "black")
32                 a[this.index].style.backgroundColor = "blue";
33         }
34         //移出事件
35         a[y].onmouseout = function () {
36             //判断是否为点击之后的颜色
37             if (a[this.index].style.backgroundColor == "blue")
38                 //如果不是点击之后的颜色，恢复原色
39             {
40                 a[this.index].style.backgroundColor = "red";
41             }
42         }
43         //点击事件
44         a[y].onclick = function () {
45             //只能有一个点击颜色，先把所有颜色都恢复本色
46             for (var v = 0; v < a.length; v++)
47             { a[v].style.backgroundColor = "red" }
48             //再把点击的颜色变色
49             a[this.index].style.backgroundColor = "black";
50         }
51     }
52 </script>
升级版变色.html
技术分享 
1 .d1 {
2     float: left;
3     width: 100px;
4     height: 30px;
5     margin-left: 10px;
6     position: relative;
7     background-color: red;
8 }
升级版变色

四。基础版大图轮播

 

 

---恢复内容结束---

常用事件【由浅入深】1


联系
我们