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底层事件机制是如 ...
随机推荐
- 最长公共子序列poj1458
#include<map> #include<set> #include<list> #include<cmath> #include<queue ...
- node中创建服务进程
背景 在node工程部署中,常常涉及到三方:本地客户端.跳板机和服务器(集群).在通过git触发gitlab hook脚本后,需要在跳板机中执行相应的ssh命令执行shell文件启动node服务器,这 ...
- IOS打包相关问题
使用了AFNetworking框架,模拟器和真机运行都不报错,但是提交商店报错Unsupported Architecture. Your executable contains unsupporte ...
- hdu2089 不要62 我的第一个数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位DP的入门题,我是根据kuangbin的博客写出来的 思路: dp[i][0],表示长度为i ...
- ArrayList源码解析(一)
源码解析系列主要对Java的源码进行详细的说明,由于水平有限,难免出现错误或描述不准确的地方,还请大家指出. 1.位置 ArrayList位于java.util包中. package java.uti ...
- 使用Linux的alternatives命令替换选择软件的版本
上周在安装搜索引擎Elasticsearch时,要求安装比较新的java 版本,我选择了java 1.8.0,安装java 成功后使用java -version 发现使用的版本仍旧是1.6.0, 查询 ...
- 回归-LDA与QDA
作者:桂. 时间:2017-05-23 06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...
- Qzone 高性能 HTTPS 实践
WeTest导读 自从去年QQ空间移动端页面开始切换到HTTPS之后,页面性能遇到了比较大的挑战,HTTPS对页面访问速度带来了比较大的影响,所以我们通过实践总结了一些能够提升HTTPS页面访问速度的 ...
- 解决shiro和quartz2 版本冲突问题
修改build.gradle compile ("org.quartz-scheduler:quartz:2.2.3") compile ("org.apache.s ...
- JavaScript中的该如何[更好的]做动效
在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者 ...