JavaScript事件（二）

例题顺序：

1.子菜单下拉
2.图片轮播
3.选项卡效果
4.进度条制作
5.滑动效果
6.滚动固定效果

1.子菜单下拉

 <!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-Type" content="text/html; charset=utf-8" />
 <title>子菜单下拉</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
         text-align:center;
         line-height:50px;
         vertical-align:middle;
         }
     #wai{
         margin-top:150px;
         width:800px;
         height:50px;
         }
     .nei{
         background-color:#9F9;
         float:left;
         width:150px;
         height:50px;
         line-height:50px;
         vertical-align:middle;
         }
     .neiw{
         width:0px;
         height:0px;
         float:left;
         display:none;}
     .nein{
         position:relative;
         top:50px;
         left:-150px;
         height:50px;
         width:150px;}
     .neil{
         margin:1px;
         width:149px;
         height:49px;
         background-color:#9F0;}
 </style>
 </head>

 <body>
     <div id="wai">
         <!--每个子菜单设置一个鼠标移上显示，一个鼠标移走隐藏-->
         <div class="nei" onmouseover="xianShi('cp')" onmouseout="yin('cp')">产品中心</div>
         <div class="neiw" id="cp">
             <div class="nein"  onmouseover="xianShi('cp')" onmouseout="yin('cp')">
                 <div class="neil">男装</div>
                 <div class="neil">女装</div>
                 <div class="neil">休闲</div>
             </div>
         </div>
         <div class="nei" onmouseover="xianShi('xw')" onmouseout="yin('xw')">新闻中心</div>
         <div class="neiw" id="xw"  onmouseover="xianShi('xw')" onmouseout="yin('xw')">
             <div class="nein">
                 <div class="neil">娱乐</div>
                 <div class="neil">军事</div>
                 <div class="neil">政策</div>
             </div>
         </div>

         <div class="nei" onmouseover="xianShi('jr')"  onmouseout="yin('jr')">今日动态</div>
         <div class="neiw" id="jr"  onmouseover="xianShi('jr')"  onmouseout="yin('jr')">
             <div  class="nein">
                 <div class="neil">男装</div>
                 <div class="neil">女装</div>
                 <div class="neil">休闲</div>
             </div>
         </div>
         <div class="nei" onmouseover="xianShi('zx')" onmouseout="yin('zx')">最新政策</div>
         <div class="neiw" id="zx">
             <div class="nein" onmouseover="xianShi('zx')" onmouseout="yin('zx')">
                 <div class="neil">商务</div>
                 <div class="neil">环境</div>
                 <div class="neil">金融</div>
             </div>
         </div>
     </div>
 </body>
 </html>
 <script>
     //鼠标移上去显示
     function xianShi(id){
         var d=document.getElementById(id);
         d.style.display="block";
     }
     //鼠标移走隐藏
     function yin(id){
         var d=document.getElementById(id);
         d.style.display="none";
     }

 </script>

这个题目需要注意的是不能只给子菜单设置外边距而不设置边框线，这样鼠标移到空白外边距时子菜单会触发隐藏效果

还有就是鼠标的事件加在子菜单的neiw和nein的div中，以及给每一个子菜单加鼠标事件，效果都是一样的

2.大图轮播效果

 <!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-Type" content="text/html; charset=utf-8" />
 <title>大图轮播</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;}
     /*设置外层div样式*/
     #wai{
         width:300px;
         height:600px;}
     /*设置图片大小，应和外层div一样，这里因为页面只有三个图片，所以直接用标签选择器设置*/
     img{
         width:300px;
         height:600px;}
 </style>
 </head>
 <body>
     <div id="wai">
             <img src="img/1 (3).jpg"/>
             <img src="img/1 (6).jpg"  style="display:none"/>
             <img src="img/1 (5).jpg"  style="display:none"/>
     </div>
 </body>
 </html>
 <script>
     //首先获取图片到数组中，这里因为页面只有三个图片没有其他内容，所以根据标签名获取
     var img=document.getElementsByTagName("img");
     //定义函数的索引值，也就是第几图片
     var index=0;
     //调用函数
     huan();
     //设置函数
     function huan(){
         //首先遍历所有图片设置隐藏
         for(i=0;i<img.length;i++){
             img[i].style.display="none";
         }
         //显示图片，如果这句话写在判断后面，会先显示第二张
         img[index].style.display="block";
         //索引加一，如果索引大于函数长度-1，索引在从0开始
         if(index>=img.length-1){
             index=0;
         }else{
             index++;
         }
         //这是轮播，每个两秒调用一次程序本身
         window.setTimeout("huan()",2000);
     }

 </script>

这里之前干过一个错误，把每个图片都放在一个div里，然后设置后两个图片所在的div默认隐藏，后面函数设置的的<img>标签显示，结果只有第一个图片显示两秒后消失。

<div>也不能乱加，看有无需要。

前后要对应好，不要前面设置的div隐藏，后面改变的img显示。

3.选项卡效果

 <!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-Type" content="text/html; charset=utf-8" />
 <title>选项卡</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
         }
     #tou{
         margin-top:100px;
         width:800px;
         height:50px;
     }
     .list{
         float:left;
         width:200px;
         height:50px;
     }
     #shen{
         width:800px;
         height:50px;}
     .list1{
         float:left;
         width:800px;
         height:500px;
         display:none;
     }
 </style>
 </head>

 <body>
     <div id="tou">
         <div class="list" style="background-color:#0F9" onclick="show('s1')"></div>
         <div class="list" style="background-color:#9F0" onclick="show('s2')"></div>
         <div class="list" style="background-color:#9FF" onclick="show('s3')"></div>
         <div class="list" style="background-color:#3CF" onclick="show('s4')"></div>
     </div>
     <div id="shen">
           <div class="list1" style="background-color:#0F9" id="s1"></div>
         <div class="list1" style="background-color:#9F0" id="s2"></div>
         <div class="list1" style="background-color:#9FF" id="s3"></div>
         <div class="list1" style="background-color:#3CF" id="s4"></div>
     </div>
 </body>
 </html>
 <script>
     //单击选项卡，先将所有子菜单隐藏，在将被点击的选项卡的子菜单显示
     function show(id){
         var s=document.getElementsByClassName("list1");
         for(var i=0;i<s.length;i++){
             s[i].style.display="none";
         }
         var a=document.getElementById(id);
         a.style.display="block";
     }
 </script>

先布局选项卡，在布局子菜单，然后根据需要可在子菜单挨个设置隐藏，也可以在样式表统一设置隐藏，根据需要，这里在样式表设置

4.进图条制作

 <!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-Type" content="text/html; charset=utf-8" />
 <title>进度条</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
         }
     #wai{
         margin-top:600px;
         width:800px;
         height:50px;
         border:1px solid #333;}
     #nei{
         float:left;
         background-color:#333;
         height:50px;
         }
 </style>
 </head>

 <body>
     <input type="button" value="开始" onclick="gun('nei')" />
     <div id="wai">
         <div id="nei" style="width:0%"></div>
     </div>
 </body>
 </html>
 <script>
     //设置循环，j代表进度，也就是宽度，一直加百分之一
     var j=0;
     function gun(id){
         if(j<100){
             j++;
         }
         //j是一个数值，用+和字符串%拼接起来之后变成了百分比字符串，字符串就可以被样式识别
         document.getElementById('nei').style.width=j+"%";
         window.setTimeout("gun()",5);
     }

     //以下是失败的方法
     /*function gun(id){
         var a=document.getElementById(id);
         var j=(parseInt(a.style.width));
         if(j<100){
             j++;
         }
         a.style.width=j+"%";
         window.setTimeout("gun()",5);
     }*/
 </script>

5.滑动效果

 <!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-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
         }
     #wai{
         width:1000px;
         height:500px;}
     #zuo{
         width:200px;
         height:500px;
         background-color:#3F0;
         float:left;}
     #you{
         width:800px;
         height:500px;
         background-color:#FF9;
         float:left;}
     #fu{
         width:40px;
         height:40px;
         background-color:#CCC;
         position:relative;
         text-align:center;
         line-height:40px;
         vertical-align:middle;
         top:-250px;
                 }
 </style>
 </head>

 <body>
     <div id="wai">
         <div id="zuo" style="width:200px"></div>
         <div id="you" style="width:800px"></div>
     </div>
     <div style="clear:both"></div>
     <div id="fu" style="left:-300px" onclick="dong()">>></div>
 </body>
 </html>
 <script>
     var z=document.getElementById("zuo");
     var y=document.getElementById("you");
     var s=document.getElementById("fu");
     function dong(){
         //获取每个div的宽度并转化为整数
         var i=parseInt(z.style.width);
         var k=parseInt(y.style.width);
         var sl=parseInt(s.style.left);
         //如果没有走到最终位置，就控制每个元素向右移动1
         if(i<800){
             i++;
             k--;
             sl++;
             z.style.width=i+"px";
             y.style.width=k+"px";
             s.style.left=sl+"px";
             window.setTimeout("dong()",6);

         }
     }
 </script>

6.滚动固定效果

 <!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-Type" content="text/html; charset=utf-8" />
 <title>滚动固定</title>
 <style>
     *{
         margin:0px auto;
         padding:0px;
         }
     #wai{
         height:2200px;
         width:800px;
         }
     #tou{
         height:50px;
         width:800px;
         background-color:#0FF;
         }
     #shen{
         height:150px;
         width:800px;
         background-color:#9F6;}
 </style>
 </head>

 <body>
     <div id="wai">
         <div id="shen"></div>
         <div id="tou" ></div>
     </div>
 </body>
 </html>
 <script>
     //监听滚动的距离,滚动触发
     window.onscroll=function(){
         //获取头部菜单是否达到浏览器顶部边框
         if(window.scrollY>150){
             //设置头部菜单相对浏览器边框定位
             document.getElementById("tou").style.position="fixed";
             //距离顶部0距离
             document.getElementById("tou").style.top="0px";
             }else{
             //如果距离小于150，也就是滚回，设置定位为空，及不定位
             document.getElementById("tou").style.position="";
             }
     }
 </script>

JavaScript事件（二）的更多相关文章

javaScript事件（二）事件处理程序
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
第一百二十一节，JavaScript事件绑定及深入
JavaScript事件绑定及深入学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
第一百二十节，JavaScript事件对象
JavaScript事件对象学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...
JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
JavaScript事件流原理解析
一.为什么会有这一篇的文章国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
Javascript事件模型系列（一）事件及事件的三种模型
一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

随机推荐

ThinkPHP框架之空控制器
HOME代表的是模块前台可以用Home 后台用Admin Model View Controller 统称为MVC Model 是数据模型主要是和数据库打交道的 View代表显 ...
ElasticSearch-5.3.1集群环境搭建，安装ElasticSearch-head插件，安装错误解决
说起来甚是惭愧,博主在写这篇文章的时候,还没有系统性的学习一下ES,只知道可以拿来做全文检索,功能很牛逼,但是接到了任务不想做也不行, leader让我搭建一下分布式的ES集群环境,用来支持企业信用数 ...
openlayers应用（二）：加载百度离线瓦片
上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机 ...
WebGIS开源解决方案之开发环境搭建(四)
续前几篇文章,前面陆续介绍了开源GIS服务器Geoserver,开源数据库Postpresql以及开源前端udig的安装和基本使用. WebGIS前端开发,可以选择arcgis for javascr ...
Java基础之equals方法和"= ="的区别
==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...
ABP文档 - 对象与对象之间的映射
文档目录本节内容: 简介 IObjectMapper 接口集成 AutoMapper 安装创建映射自动映射的特性自定义映射扩展方法 MapTo 单元测试预定义的映射 Localizabl ...
vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
分享一个超级好用的php程序员工具箱
分享一个超级好用的php程序员工具箱,是由php中文网开发的. 集合了php环境搭建.在线小工具.原生手册.文字与视频教程.问答社区等 (php程序员工具箱 v0.1版本,点此下载:http://ww ...
ng-option
select 是 AngularJS 预设的一组directive.下面是其官网api doc给出的用法:AngularJS:select 大意是,select中的ngOption可以采用和ngRep ...
MyBatis之TypeHandler
在大学写web应用的时候经常会遇到这么个问题,当我要插入一条数据,某个数据是Date类型,数据库中却是VARCHAR类型,这个时候可能会傻乎乎的先把这个数据自己手动转换成String类型再插入到数据库 ...

JavaScript事件（二）

JavaScript事件（二）的更多相关文章

随机推荐

热门专题