JavaScript事件（二）
时间:2022-04-29
本文章向大家介绍JavaScript事件（二），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
例题顺序：
1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果
1.子菜单下拉
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;
10 text-align:center;
11 line-height:50px;
12 vertical-align:middle;
13 }
14 #wai{
15 margin-top:150px;
16 width:800px;
17 height:50px;
18 }
19 .nei{
20 background-color:#9F9;
21 float:left;
22 width:150px;
23 height:50px;
24 line-height:50px;
25 vertical-align:middle;
26 }
27 .neiw{
28 width:0px;
29 height:0px;
30 float:left;
31 display:none;}
32 .nein{
33 position:relative;
34 top:50px;
35 left:-150px;
36 height:50px;
37 width:150px;}
38 .neil{
39 margin:1px;
40 width:149px;
41 height:49px;
42 background-color:#9F0;}
43 </style>
44 </head>
45
46 <body>
47 <div id="wai">
48 <!--每个子菜单设置一个鼠标移上显示，一个鼠标移走隐藏-->
49 <div class="nei" onmouseover="xianShi('cp')" onmouseout="yin('cp')">产品中心</div>
50 <div class="neiw" id="cp">
51 <div class="nein" onmouseover="xianShi('cp')" onmouseout="yin('cp')">
52 <div class="neil">男装</div>
53 <div class="neil">女装</div>
54 <div class="neil">休闲</div>
55 </div>
56 </div>
57 <div class="nei" onmouseover="xianShi('xw')" onmouseout="yin('xw')">新闻中心</div>
58 <div class="neiw" id="xw" onmouseover="xianShi('xw')" onmouseout="yin('xw')">
59 <div class="nein">
60 <div class="neil">娱乐</div>
61 <div class="neil">军事</div>
62 <div class="neil">政策</div>
63 </div>
64 </div>
65
66 <div class="nei" onmouseover="xianShi('jr')" onmouseout="yin('jr')">今日动态</div>
67 <div class="neiw" id="jr" onmouseover="xianShi('jr')" onmouseout="yin('jr')">
68 <div class="nein">
69 <div class="neil">男装</div>
70 <div class="neil">女装</div>
71 <div class="neil">休闲</div>
72 </div>
73 </div>
74 <div class="nei" onmouseover="xianShi('zx')" onmouseout="yin('zx')">最新政策</div>
75 <div class="neiw" id="zx">
76 <div class="nein" onmouseover="xianShi('zx')" onmouseout="yin('zx')">
77 <div class="neil">商务</div>
78 <div class="neil">环境</div>
79 <div class="neil">金融</div>
80 </div>
81 </div>
82 </div>
83 </body>
84 </html>
85 <script>
86 //鼠标移上去显示
87 function xianShi(id){
88 var d=document.getElementById(id);
89 d.style.display="block";
90 }
91 //鼠标移走隐藏
92 function yin(id){
93 var d=document.getElementById(id);
94 d.style.display="none";
95 }
96
97 </script>这个题目需要注意的是不能只给子菜单设置外边距而不设置边框线，这样鼠标移到空白外边距时子菜单会触发隐藏效果
还有就是鼠标的事件加在子菜单的neiw和nein的div中，以及给每一个子菜单加鼠标事件，效果都是一样的
2.大图轮播效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;}
10 /*设置外层div样式*/
11 #wai{
12 width:300px;
13 height:600px;}
14 /*设置图片大小，应和外层div一样，这里因为页面只有三个图片，所以直接用标签选择器设置*/
15 img{
16 width:300px;
17 height:600px;}
18 </style>
19 </head>
20 <body>
21 <div id="wai">
22 <img src="img/1 (3).jpg"/>
23 <img src="img/1 (6).jpg" style="display:none"/>
24 <img src="img/1 (5).jpg" style="display:none"/>
25 </div>
26 </body>
27 </html>
28 <script>
29 //首先获取图片到数组中，这里因为页面只有三个图片没有其他内容，所以根据标签名获取
30 var img=document.getElementsByTagName("img");
31 //定义函数的索引值，也就是第几图片
32 var index=0;
33 //调用函数
34 huan();
35 //设置函数
36 function huan(){
37 //首先遍历所有图片设置隐藏
38 for(i=0;i<img.length;i++){
39 img[i].style.display="none";
40 }
41 //显示图片，如果这句话写在判断后面，会先显示第二张
42 img[index].style.display="block";
43 //索引加一，如果索引大于函数长度-1，索引在从0开始
44 if(index>=img.length-1){
45 index=0;
46 }else{
47 index++;
48 }
49 //这是轮播，每个两秒调用一次程序本身
50 window.setTimeout("huan()",2000);
51 }
52
53 </script>这里之前干过一个错误，把每个图片都放在一个div里，然后设置后两个图片所在的div默认隐藏，后面函数设置的的<img>标签显示，结果只有第一个图片显示两秒后消失。
<div>也不能乱加，看有无需要。
前后要对应好，不要前面设置的div隐藏，后面改变的img显示。
3.选项卡效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;
10 }
11 #tou{
12 margin-top:100px;
13 width:800px;
14 height:50px;
15 }
16 .list{
17 float:left;
18 width:200px;
19 height:50px;
20 }
21 #shen{
22 width:800px;
23 height:50px;}
24 .list1{
25 float:left;
26 width:800px;
27 height:500px;
28 display:none;
29 }
30 </style>
31 </head>
32
33 <body>
34 <div id="tou">
35 <div class="list" style="background-color:#0F9" onclick="show('s1')"></div>
36 <div class="list" style="background-color:#9F0" onclick="show('s2')"></div>
37 <div class="list" style="background-color:#9FF" onclick="show('s3')"></div>
38 <div class="list" style="background-color:#3CF" onclick="show('s4')"></div>
39 </div>
40 <div id="shen">
41 <div class="list1" style="background-color:#0F9" id="s1"></div>
42 <div class="list1" style="background-color:#9F0" id="s2"></div>
43 <div class="list1" style="background-color:#9FF" id="s3"></div>
44 <div class="list1" style="background-color:#3CF" id="s4"></div>
45 </div>
46 </body>
47 </html>
48 <script>
49 //单击选项卡，先将所有子菜单隐藏，在将被点击的选项卡的子菜单显示
50 function show(id){
51 var s=document.getElementsByClassName("list1");
52 for(var i=0;i<s.length;i++){
53 s[i].style.display="none";
54 }
55 var a=document.getElementById(id);
56 a.style.display="block";
57 }
58 </script>先布局选项卡，在布局子菜单，然后根据需要可在子菜单挨个设置隐藏，也可以在样式表统一设置隐藏，根据需要，这里在样式表设置
4.进图条制作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;
10 }
11 #wai{
12 margin-top:600px;
13 width:800px;
14 height:50px;
15 border:1px solid #333;}
16 #nei{
17 float:left;
18 background-color:#333;
19 height:50px;
20 }
21 </style>
22 </head>
23
24 <body>
25 <input type="button" value="开始" onclick="gun('nei')" />
26 <div id="wai">
27 <div id="nei" style="width:0%"></div>
28 </div>
29 </body>
30 </html>
31 <script>
32 //设置循环，j代表进度，也就是宽度，一直加百分之一
33 var j=0;
34 function gun(id){
35 if(j<100){
36 j++;
37 }
38 //j是一个数值，用+和字符串%拼接起来之后变成了百分比字符串，字符串就可以被样式识别
39 document.getElementById('nei').style.width=j+"%";
40 window.setTimeout("gun()",5);
41 }
42
43 //以下是失败的方法
44 /*function gun(id){
45 var a=document.getElementById(id);
46 var j=(parseInt(a.style.width));
47 if(j<100){
48 j++;
49 }
50 a.style.width=j+"%";
51 window.setTimeout("gun()",5);
52 }*/
53 </script>5.滑动效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;
10 }
11 #wai{
12 width:1000px;
13 height:500px;}
14 #zuo{
15 width:200px;
16 height:500px;
17 background-color:#3F0;
18 float:left;}
19 #you{
20 width:800px;
21 height:500px;
22 background-color:#FF9;
23 float:left;}
24 #fu{
25 width:40px;
26 height:40px;
27 background-color:#CCC;
28 position:relative;
29 text-align:center;
30 line-height:40px;
31 vertical-align:middle;
32 top:-250px;
33 }
34 </style>
35 </head>
36
37 <body>
38 <div id="wai">
39 <div id="zuo" style="width:200px"></div>
40 <div id="you" style="width:800px"></div>
41 </div>
42 <div style="clear:both"></div>
43 <div id="fu" style="left:-300px" onclick="dong()">>></div>
44 </body>
45 </html>
46 <script>
47 var z=document.getElementById("zuo");
48 var y=document.getElementById("you");
49 var s=document.getElementById("fu");
50 function dong(){
51 //获取每个div的宽度并转化为整数
52 var i=parseInt(z.style.width);
53 var k=parseInt(y.style.width);
54 var sl=parseInt(s.style.left);
55 //如果没有走到最终位置，就控制每个元素向右移动1
56 if(i<800){
57 i++;
58 k--;
59 sl++;
60 z.style.width=i+"px";
61 y.style.width=k+"px";
62 s.style.left=sl+"px";
63 window.setTimeout("dong()",6);
64
65 }
66 }
67 </script>6.滚动固定效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 <style>
7 *{
8 margin:0px auto;
9 padding:0px;
10 }
11 #wai{
12 height:2200px;
13 width:800px;
14 }
15 #tou{
16 height:50px;
17 width:800px;
18 background-color:#0FF;
19 }
20 #shen{
21 height:150px;
22 width:800px;
23 background-color:#9F6;}
24 </style>
25 </head>
26
27 <body>
28 <div id="wai">
29 <div id="shen"></div>
30 <div id="tou" ></div>
31 </div>
32 </body>
33 </html>
34 <script>
35 //监听滚动的距离,滚动触发
36 window.onscroll=function(){
37 //获取头部菜单是否达到浏览器顶部边框
38 if(window.scrollY>150){
39 //设置头部菜单相对浏览器边框定位
40 document.getElementById("tou").style.position="fixed";
41 //距离顶部0距离
42 document.getElementById("tou").style.top="0px";
43 }else{
44 //如果距离小于150，也就是滚回，设置定位为空，及不定位
45 document.getElementById("tou").style.position="";
46 }
47 }
48 </script>
- Android 双进程Service常驻后台，无惧“一键清理”
- Android之捕获TextView超链接
- 自封装Android软键盘工具类ImeUtil
- XSS挑战第一期Writeup
- 安全公司新星Aorato推出“行为防火墙”
- 倍数提高工作效率的 Android Studio 奇技
- xss如何加载远程js的一些tips
- Android中如何实现图文混排
- Jenkins 创始人：持续交付的 What、Why 及 How
- Android中如何提取和生成mp4文件
- 两张图片告诉你为什么域名会被解析到65.49.2.178
- 【有人@我】Android中高亮变色显示文本中的关键字
- 一个简单易用的 Android 导航栏TitleBar
- 分析一个跨平台DDOS僵尸网络
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- FLASK数据库模型
- 选择排序图解与代码示例
- spring-boot-route（二十三）开发微信公众号
- 搞懂 SQL 查询优化原理分析，秒速处理大数据量查询
- 日历时间格式Date与Calender
- 使用 SpringBoot AOP 记录操作日志、异常日志
- java写一个音乐播放程序，同时显示歌词
- 使用反射获取注解中的内容
- 记一次企业微信对接踩坑之旅(ಥ_ಥ)
- 图解 SQL，这也太形象了吧！
- 函数式接口小结
- 冒泡排序+选择排序+插入排序+图与代码
- [解锁新姿势] 分享 7 个优化代码的技巧
- 常量池与堆中放入String数据，比较大小
- Could not find artifact org.apache.tomcat.maven:tomcat7-maven-plugin:pom.....