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底层事件机制是如 ...
随机推荐
- Lamp环境搭建Linux CentOS6.5编译安装mysql5.6
经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...
- 关于java和c++中的i++
看到一个题目,大概是i=i++之类. 乍一看很简单,都知道i++的先参与计算再自增, 所以i不变. 但是仔细一想, 如果i不变, 那么在赋值之后, 自增的i, 增加的是谁呢? 逻辑顺序是怎样的呢? / ...
- MVC两种获取上传的文件数据变量的方式
第一种方式,在控制器中利用HttpPostedFileBase参数对象获取. [HttpPost] public ActionResult SaveFile(HttpPostedFileBase up ...
- Linux上rpm方式安装JDK1.7
说明: 1.Linux版本 CentOS6.5_x86 2.Java版本 JDK1.7 32位的rpm包,所以是以rpm方式安装的java 3.可以使用yum install java从yum源中安装 ...
- 如何优雅地运用 Chrome (Google)
已经在很多工具类文章前言中,提及使用工具的重要性:以至于在写这篇时候,大为窘迫:穷尽了脑海中那些名句箴言,目测都已然在先前文章中被引用.鉴于杳让人心底意识到工具的重要性,并且能践行之,远比介绍如何使用 ...
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- opencv探索之路（十二）：感兴趣区域ROI和logo添加技术
在图像处理领域,有一个非常重要的名词ROI. 什么是ROI? 它的英文全称是Region Of Interest,对应的中文解释就是感兴趣区域. 感兴趣区域,就是我们从图像中选择一个图像区域,这个区域 ...
- VueJs生产环境部署
VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点. 先来看VueJs最终 ...
- Qzone 高性能 HTTPS 实践
WeTest导读 自从去年QQ空间移动端页面开始切换到HTTPS之后,页面性能遇到了比较大的挑战,HTTPS对页面访问速度带来了比较大的影响,所以我们通过实践总结了一些能够提升HTTPS页面访问速度的 ...
- vs2015未安装 Style 的 Visual Studio 语言支持
解决方案:在浏览器搜索下载安装Microsoft ASP.NET and Web Tools即可 下载地址:https://www.microsoft.com/en-us/download/confi ...