<!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>
闲来没事做个滚动效果练手，希望大神们多提建议，此段代码如果有bug或能优化的地方大家用于提出自己的看法……
相关推荐
这份名为“数字通信国外大学纯手写通俗易懂知识点讲解梳理(英文含习题和答案).rar”的压缩包文件，是一份专为大学生设计的数字通信课程的学习资源。它包含了国外大学教授的手写笔记，以通俗易懂的方式深入浅出地讲解...
本项目是基于Vue.js框架实现的移动端轮播图，具备了触摸滑动滚动、自动轮播、无缝滚动以及循环无回滚等功能，非常适合前端初学者进行学习和实践。 首先，我们要理解Vue.js的基础概念。Vue.js是一个轻量级的前端框架...
JavaScript手写电子签名技术是一种在Web应用中实现用户签名功能的方法，它允许用户通过鼠标或触摸设备在屏幕上绘制签名，并将其保存为图像。这一技术在电子商务、在线合同签署等领域广泛应用，提高了业务流程的效率...
【标题】"简单完整手写动画js" 涉及的知识点主要集中在JavaScript（js）编程语言上，尤其是关于创建动态效果和动画的部分。在Web开发中，JavaScript是一种不可或缺的客户端脚本语言，用于实现页面的交互性和动态功能...
"js实现的带笔锋手写签名"是一个基于JavaScript技术，用于实现用户在Web页面上进行真实感的手写签名的功能。这个功能通常由HTML5提供支持，特别是其Canvas API，它允许我们在网页上进行动态图形绘制。 1. **...
在这个技术实例中，我们将探讨如何使用PHP、JavaScript（JS）和jSignature库来实现一个在线手写电子签名的功能。jSignature是一个轻量级的JavaScript库，它允许用户在网页上进行手写签名，非常适合于电子商务、合同...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JS实现手写输入的功能，包括全屏书写、语音读字、毛笔签名以及支持简繁英数标点等特性。 ...
手写签名JS插件是一种基于JavaScript技术实现的交互式组件，专为电子设备（包括PC和移动设备）设计，提供用户在屏幕上进行手写签名的功能。这种插件在电子合同平台中尤为常见，因为它们能够方便用户在无纸化环境中...
【标题】"js手写输入在线搜索rar" 涉及的主要知识点是JavaScript（JS）在实现手写输入和在线搜索功能方面的应用。这通常包括交互式用户界面的设计、事件处理、图像处理以及可能的数据存储和检索。 【描述】中的...
1. 第三方库：利用第三方库如IME.js、Handwriting.js等，它们提供了手写输入的接口，可以通过JavaScript调用并接收用户的手写输入。 2. Web组件：使用Web Components技术封装手写输入组件，与原生表单结合使用。...
“百度网页手写输入法”的hwInput.js文件就是用JavaScript编写的，它处理用户的手写输入事件，识别手写轨迹，并将其转化为文本。此外，JavaScript还负责管理多个输入框之间的交互逻辑，确保用户在不同输入框间流畅地...
标题“js 实现上下滚动”涉及的是JavaScript编程中如何创建页面元素的上下滚动效果，这在网页设计中非常常见，特别是在动态展示信息或创建滚动通知时。JavaScript是一种强大的客户端脚本语言，它允许我们对HTML文档...
JavaScript手写签名源...总的来说，这个"js手写签名源代码含js文件"项目涵盖了JavaScript编程、前端开发基础、Canvas绘图、数据传输、UI设计等多个方面的知识。理解并掌握这些知识点对于前端开发者来说是非常重要的。
"浏览器js手写汉字"这个主题涉及到的是如何利用JavaScript技术在浏览器环境中实现手写汉字的功能，同时考虑到跨浏览器兼容性，包括对Internet Explorer（IE）、Mozilla Firefox、Google Chrome以及360浏览器的支持。...
"原生js手写tree树形分类选择插件"就是一个这样的例子，它允许用户通过树状结构来展示和操作数据，比如进行分类选择。这个插件利用了JavaScript的灵活性，结合jQuery库以增强DOM操作和事件处理，提供了高效且易于...
javascript移动端手写签名，通过canvas绘制，base64图片
在这个场景中，我们关注的是一个实现手写输入功能的JavaScript源码，它能够帮助开发者在网页上集成这种功能。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的脚本语言，主要应用于Web开发，...
在JavaScript和jQuery的世界里，创建一个带有滚动条的下拉框和下拉树是一项常见的任务，特别是在构建交互式用户界面时。下拉框通常用于提供一组可选的选项，而下拉树则更进一步，它以层级结构展示数据，允许用户以...
跑文字上下、左右滚动跑马灯效果，欢迎指正
本文将深入探讨如何手写一个React虚拟化无限滚动组件，以及解决在实现过程中遇到的关键难点。 首先，我们要理解虚拟化的基本原理。它主要基于这样一个思路：在滚动过程中，只渲染当前屏幕可见的元素，而非一次性...