学习blus老师js(3)--定时器的使用
1.无缝滚动——基础
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; left:200px; top:150px; margin:50px;}
</style>
</head> <body>
<div id="div1" onclick="alert(this.offsetLeft);">
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li'); var speed=-2; oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.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);
}; document.getElementsByTagName('a')[0].onclick=function ()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function ()
{
speed=2;
};
};
</script>
</head> <body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
学习blus老师js(3)--定时器的使用的更多相关文章
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- 学习blus老师js(5)--DOM操作应用高级
一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...
- 学习blus老师js(1)--基础
1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...
- 学习blus老师js(4)--DOM
一.DOM节点 1.获取子节点: childNodes nodeType 节点类型 children 只包括元素,不包括文本: 子节点只算第一层.只算孩子一级 ...
- 学习blus老师js(2)--深入JavaScript
1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组 例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- 【JavaScript基础】Js的定时器（你想看的原理也在哟）
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
随机推荐
- python爬虫scrapy命令工具学习之篇三
命令行工具(Command line tools) 全局命令 startproject settings runspider shell fetch view version 项目命令 crawl c ...
- html 入门2-表
html 入门-列表 表格 表单 一.表标签 1,无序列表 ( ul:li ) 注意:代码排版必须要层次分明 2,有序列表 (ol:li) 3,自定义列表 (dl:li) 二．表格标签 1,tabl ...
- C++实现可变参数列表
// 接收数量不定的实参.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #includ ...
- Nginx 多进程连接请求/事件分发流程分析
Nginx使用多进程的方法进行任务处理,每个worker进程只有一个线程,单线程循环处理全部监听的事件.本文重点分析一下多进程间的负载均衡问题以及Nginx多进程事件处理流程,方便大家自己写程序的时候 ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
- Linux CentOS7.0下JAVA安装和配置环境变量
一.前言: CentOS7.0虽然自带JDK1.7和1.8,运行“java -version”命令也可以看到版本信息,但是jdk的安装环境不全,比如缺少tool.jar和dt.jar等,这就导致“ja ...
- css强制html不换行 css强制英文单词断行 重拾丢失的
css强制html不换行 css强制英文单词断行 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-brea ...
- Faces人脸识别项目简介
Faces人脸识别 分为两个模块,Faces文件夹下存放人脸识别算法的代码,Web文件夹下存放网站搭建的代码 详情请查看各个模块下的readme文档 项目简介 核心算法 一款基于Dlib.opencv ...
- Mysql查询正在运行的事务以及杀掉它
查询 正在执行的事务:SELECT * FROM information_schema.INNODB_TRX 根据这个事务的线程ID(trx_mysql_thread_id): 可以使用mysql命令 ...
- （转）ZooKeeper-3.3.4集群安装配置
转载于 千与 的 http://blog.csdn.net/shirdrn/article/details/7183503 ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向 ...