无缝滚动js代码通俗易懂(自写)


Posted in Javascript onJune 19, 2013
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style> 
*{padding:0; margin:0;} 
ul{ list-style:none;} 
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;} 
#div ul{ position:absolute; height:100px; left:0;} 
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left} 
</style> 
<script> 
window.onload=function(){ 
var oDiv=document.getElementById("div"); 
var oUl=oDiv.getElementsByTagName("ul")[0]; 
var oLi=oUl.getElementsByTagName("li"); 
var oInput=document.getElementsByTagName('input'); 
oUl.innerHTML +=oUl.innerHTML; 
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px"; 
var iSeep=-2; 
var tamer=null; 
clearInterval(tamer); 
function starMove(){ 
tamer=setInterval(function(){ 
oUl.style.left=oUl.offsetLeft+iSeep+"px"; 
if(-oUl.offsetLeft >= oUl.offsetWidth/2){ 
oUl.style.left="0px"; 
}else if(oUl.offsetLeft>0){ 
oUl.style.left=-oUl.offsetWidth/2+"px"; 
} 
},30) 
} 
starMove(); 
oDiv.onmouseover=function(){ 
clearInterval(tamer); 
} 
oDiv.onmouseout=function(){ 
starMove(); 
} 
oInput[0].onclick=function(){ 
iSeep=-2; 
} 
oInput[1].onclick=function(){ 
iSeep=2; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="左"> 
<input type="button" value="右"> 
<div id='div'> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
浅说js变量
May 25 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
简单实现JS上传图片预览功能
Apr 14 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
实例分析js事件循环机制
Dec 13 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 #Javascript
jQuery之ajax技术的详细介绍
Jun 19 #Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 #Javascript
jQuery之排序组件的深入解析
Jun 19 #Javascript
jQuery之日期选择器的深入解析
Jun 19 #Javascript
jQuery之按钮组件的深入解析
Jun 19 #Javascript
jQuery之自动完成组件的深入解析
Jun 19 #Javascript
You might like
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python中turtle库的使用实例
2019/09/09 Python
Keras 使用 Lambda层详解
2020/06/10 Python
8种常用的Python工具
2020/08/05 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
省文明单位申报材料
2014/05/08 职场文书
董事长秘书工作职责
2014/06/10 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
今日说法观后感
2015/06/08 职场文书
2019邀请函格式及范文
2019/05/20 职场文书