利用JavaScript做无缝滚动
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li {float: left;width:100px;height: 100px; list-style:none;}
</style>
</head> <body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<a href="javascript:;">中速</a>
<a href="javascript:;">高速</a>
<div id="div1">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
var odiv=document.getElementById('div1');
var oul=odiv.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
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);
}
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function()
{
speed=+2;
}
document.getElementsByTagName('a')[2].onclick=function()
{
speed=-1;
}
document.getElementsByTagName('a')[3].onclick=function()
{
speed=-4;
}
</script>
</body>
</html>
利用JavaScript做无缝滚动的更多相关文章
- JavaScript实现无缝滚动 原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
- webbrowser内容滚动（javascript内容无缝滚动）
一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...
- 利用background-attachment做视差滚动效果
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...
- Javascript图片无缝滚动
http://www.cnblogs.com/shouce/p/5068787.html
- (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- vue 无缝滚动文字
前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...
- JS无缝滚动
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- win10家庭版转专业版并激活
之前重装win10的时候没注意,不小心装成家庭版. 本以为家庭版也没什么,后来发现这对程序员来说造成致命打击. 在系统信息页面底部点击“更改密匙”,输入win10升级产品密匙:VK7JG-NPHTM- ...
- 国庆day2
a[问题描述]你是能看到第一题的 friends呢.—— hja世界上没有什么比卖的这 贵弹丸三还令人绝望事了,所以便么一道题.定义
- vue全局使用axios的方法
在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...
- Git 基础教程 之 从远程库克隆
③ 克隆一个本地仓库 a, 在合适的地方,在Git Bash下执行命令: git clone git@github.com:hardy9sap/gittutorial.git
- cxGrid主从表删除从表记录的困惑
cxgrid主从表显示方便直观. varADetailDC: TcxGridDataController;AView: TcxCustomGridTableView; with cxgrdbndtbl ...
- foj 2139
hi.baidu.com/ydlqw/item/120cd21a5afd5becddeeca41?qq-pf-to=pcqq.c2c
- Adaptively handling remote atomic execution based upon contention prediction
In one embodiment, a method includes receiving an instruction for decoding in a processor core and d ...
- sublime text 插件emmet快捷命令
原文链接:http://www.17yaobai.com/?p=255 语法: 后代:> 缩写:nav>ul>li <nav> <ul> <li> ...
- 反射常用API
反射所有功能都是通过class API来实现的 class常用API有: 1.class.GETINTERFACES():获得这个类实现的接口. 2.class.getMethods() Method ...
- HDU 2830 Matrix Swapping II (预处理的线性dp)
Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...