day28-Javascript定时器的应用案例
转行学开发,代码100天——2018-04-13
上篇文章中记录了定时器的用法,本篇通过两个常用案例进一步巩固定时器的应用。
案例一:消息框延时,如QQ中鼠标移动到头像,弹出一个信息框;移出后,消息框消失。
首先在HTML中设计两个div盒子,一个作为头像,一个作为消息框
设计其样式为:
div{
float: left;
margin: 10px;
}
#main{
width: 60px;
height: 60px;
background: red; }
#message{
width: 160px;
height: 100px;
background: #ccc;
display: none;
text-align: center;
}
</style>
通过对盒子1及盒子2的鼠标移入移出事件,添加相应的消息框即盒子2的显示隐藏;
<script type="text/javascript">
window.onload = function(){
var mainBox = document.getElementById("main");
var msgBox = document.getElementById("message");
var timer = null;
mainBox.onmouseover = function(){
clearTimeout(timer);
msgBox.style.display = "block"; };
mainBox.onmouseout = function(){ timer = setTimeout(function(){
msgBox.style.display = "none";
},300);
} msgBox.onmouseover =function(){
clearTimeout(timer);
}; msgBox.onmouseout = function(){
timer =setTimeout(function(){
msgBox.style.display = "none";
},500);
}
};
</script>
主要实现功能:
1.鼠标移入红色盒子,灰色盒子显示
2.鼠标移开红色盒子,灰色盒子隐藏;加延时
3.鼠标从红色盒子移入灰色盒子,延时隐藏取消;
4.鼠标从灰色盒子移入到红色盒子,灰色盒子隐藏同时又显示。即取消灰色盒子的延时隐藏
确认功能无误后,可对该段代码进行优化处理。
<script type="text/javascript">
window.onload = function(){
//通过ID获取元素对象
function $(id){
return document.getElementById(id);
}
//设置变量
var mainBox = $("main");
var msgBox = $("message");
var timer = null;
//鼠标事件
msgBox.onmouseover=mainBox.onmouseover = function(){
clearTimeout(timer);
msgBox.style.display = "block"; };
msgBox.onmouseout=mainBox.onmouseout = function(){ timer = setTimeout(function(){
msgBox.style.display = "none";
},300);
};
};
</script>
案例二:图片无缝滚动
图片无缝滚动功能时网站上常见的一个效果。图片滚动即修改其left值;利用及时器可设置图片的left值自动增加或者减少即可实现图片滚动效果。
本案例中选择了5张图片,实现其左右滚动可控。
HTML中设计两个操控按钮,分别向左向右
其次,图片容器部分,实现图片的横排。
<input id="left" type="button" value="<<向左">
<input id="right" type="button" value="左右>>">
<div id="container">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
CSS:
<style type="text/css">
/* container start*/
*{
margin:;
padding:;
}
#container{
height: 108px;
width: 890px;
margin: 100px auto;
position: relative;
background: red;
overflow: hidden;
}
#container ul{
position: absolute;
left:;
top:;
/*width: 100%;*/ }
#container ul li{
float: left;
list-style: none;
}
#container ul li img{
width:178px;
height:108px;
} </style>
JavaScript实现图片滚动:
<script>
window.onload = function(){
var oDiv = document.getElementById("container");
var oUl = oDiv.getElementsByTagName("ul")[0];
var oli = oUl.getElementsByTagName("li");
var LBtn = document.getElementById("left");
var RBtn = document.getElementById("right");
//滚动速度
var speed =-2; //位置计算
oUl.innerHTML = oUl.innerHTML+ oUl.innerHTML;
oUl.style.width =oli[0].offsetWidth*oli.length+"px"; function move(){ if (oUl.offsetLeft<-oUl.offsetWidth/2) {
oUl.style.left = "0";
}
if (oUl.offsetLeft>0) {
oUl.style.left = -oUl.offsetWidth/2+"px";
}
oUl.style.left = oUl.offsetLeft+speed+"px";
}
var timer = setInterval(move,30); oDiv.onmouseover = function(){
clearInterval(timer);
};
oDiv.onmouseout = function(){
timer = setInterval(move,30);
};
//按钮控制事件
LBtn.onclick = function(){
speed=-2;
}
RBtn.onclick = function(){
speed=2;
} }; </script>
注意:ul的宽度计算部分
//位置计算
oUl.innerHTML = oUl.innerHTML+ oUl.innerHTML;
oUl.style.width =oli[0].offsetWidth*oli.length+"px";
通过判断左偏移量来充值ul的位置
——————end——————
转需,希望对你也有帮助。
day28-Javascript定时器的应用案例的更多相关文章
- day27—JavaScript实现定时器及其应用案例
转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...
- 【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
- Javascript定时器(三)——setTimeout(func, 0)
setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- JavaScript定时器详解
假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...
- Javascript 定时器调用传递参数的方法
文章来源: https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- JavaScript定时器作业
JavaScript定时器作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
随机推荐
- oracle--二维表的操作创建修改删除
oracle学习内容 oracle的管理系统学习 oracle的数据管理学习 oracle的用户管理 oracle二维表管理 创建表和字段讲解 --创建表学习 1. 创建表的基本语句:create t ...
- Monitor HDU6514 二维差分入门学习
Monitor HDU 6514 二维差分入门学习 题意 小腾有\(n*m\)的田地,但是有小偷来偷东西,在一片矩形区域上,有一部分区域是监控可以覆盖到的,这部分区域由一个或多个包含于该矩形区域的小矩 ...
- INPUT输入子系统——按键
一.什么是input输入子系统? 1.1. Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的 ...
- selenium自动新增店铺
说明:仅作为参考练习,代码中涉及数据均为测试数据. from selenium import webdriver from selenium.webdriver import ActionChains ...
- JavaScript 模块化简析
关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...
- zTree根节点默认打开
1.在生成tree的json数据中,直接给出:open:true的属性; 2.treeObj.expandAll(true); 3.var zTree = $.fn.zTree.getZTreeObj ...
- 2019-5-28-VisualStudio-扩展开发
title author date CreateTime categories VisualStudio 扩展开发 lindexi 2019-05-28 19:51:49 +0800 2018-2-1 ...
- 【python】pyenv与virtualenv安装,实现python多版本多项目管理
踩了很多坑,记录一下这次试验,本次测试环境:Linux centos7 64位. pyenv是一个python版本管理工具,它能够进行全局的python版本切换,也可以为单个项目提供对应的python ...
- Jenkins构建触发器(定时构建项目)
如上图所示,Jenkins通常通过点击“立即构建”来进行手动构建项目,其实也可以使用配置中的 Poll SCM和Build periodically来进行定时自动构建项目: 在“配置”——>“构 ...
- unixbench
1.下载 https://github.com/kdlucas/byte-unixbench/archive/v5.1.3.tar.gz 2.修改Makefile 交叉编译 #CC=gccCC = a ...