利用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 ...
随机推荐
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- KVM之virsh管理虚拟机内存
调整内存 virsh setmem 命令帮助: [root@ubuntu ~]# virsh setmem --help NAME setmem - change memory allocation ...
- vue实现单页应用demo
vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...
- MySQL创建临时表
drop TEMPORARY table if EXISTS temp_table; create TEMPORARY table temp_table( id int not null, usern ...
- eas之常用源码整理
//查看是否有相关权限 boolean hasAllotPermission= PermissionFactory.getRemoteInstance().hasFunctionPer ...
- Atcoder AGC031C Differ By 1 Bit (构造、二进制)
哎呀这个C怎么比B还水....(我现在大概也就会做点这种水题了吧) 题目链接 https://atcoder.jp/contests/agc031/tasks/agc031_c 题目大意 符号约定: ...
- java extend 和 implements 的区别
1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extends 是继承某个类, 继承之后可以使用父类的方法, 也可以重 ...
- 经验总结18--EF改动关系，多对多
EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...
- HDU 5063 Operation the Sequence（暴力）
HDU 5063 Operation the Sequence 题目链接 把操作存下来.因为仅仅有50个操作,所以每次把操作逆回去执行一遍,就能求出在原来的数列中的位置.输出就可以 代码: #incl ...
- bootstrap搜索样式
<div class="container"> <div class="input-group"> <input type=&qu ...