JavaScript事件（二）

二十三年蝉

发布于 2018-02-27 10:20:29

1.3K00

代码可运行

文章被收录于专栏：闻道于事闻道于事

运行总次数：0

代码可运行

例题顺序：

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>