无缝滚动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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
Javasript设计模式之链式调用详解
Apr 26 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
html实现随机点名器的示例代码
Apr 02 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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python+pygame实现坦克大战
2019/09/10 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python对execl 处理操作代码
2020/06/22 Python
python中实现栈的三种方法
2020/12/19 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
地道战观后感300字
2015/06/04 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript