[英]JavaScript Horizontal Slider
我正在尝试为自己的练习/享受的项目编写不带JQuery的水平滑块。
以下是相关代码:
function moveit() {
"use strict";
document.getElementById("position").style.left = window.event.clientX + "px";
}
window.onload = function () {
"use strict";
findtime();
document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
var mousemove;
document.getElementById("scrollbar").onclick = function () {
mousemove = window.setInterval("moveit()", 1000);
};
document.getElementById("scrollbar").mouseup = function () {
window.clearInterval(mousemove);
};
};
不用说我对此有疑问。 它会在Chrome,Firefox等上不断产生错误:
Uncaught TypeError: Cannot read property 'clientX' of undefined
现在,如果我运行以下代码,则可以正常运行(但对于跟随鼠标的位置没有用):
document.getElementById("position").style.left = 12 + "px";
HTML如下:
<?php include("header.php"); ?>
<div>
<video id="thevideo">
<source src="movie.ogv" type="video/ogg" />
</video>
</div>
<div>
<span id="currenttime" contenteditable="true">0:00</span> / <span id="totaltime"></span>
</div>
<div id="scrollbar">
<div id="position" draggable="true"></div>
</div>
<?php include("footer.php"); ?>
这是我前一段时间做的,也许您可以根据您的程序进行调整。
var scrollTimer;
function Timer(callback, delay) {
var timerId, start, remaining = delay;
this.pause = function() {
window.clearTimeout(timerId);
remaining -= new Date() - start;
};
this.resume = function() {
start = new Date();
timerId = window.setTimeout(callback, remaining);
};
this.resume();
}
function scroll(down) {
var scrollframe = document.getElementById("contentframe");
var curY = document.all?
scrollframe.contentWindow.document.body.scrollTop
: scrollframe.contentWindow.window.pageYOffset;
var delta = 5;
var newY = down? curY+delta : curY-delta;
scrollframe.contentWindow.scrollTo(0,newY);
}
function autoscroll(down) {
scroll(down);
scrollTimer = new Timer(function() {
autoscroll(down);
}, 20);
}
function stopscroll() {
scrollTimer.pause();
}
函数scroll(boolean down)导致向上或向下滚动到iframe contentframe
的单个delta
增量。 计时器用于重复该操作,这是您将如何使用它:
<a href=#>
<img src="scroller/arrowTop.png" title="Scroll Up"
onMouseOver="autoscroll(false);" onMouseOut="stopscroll();"/>
</a>
希望这可以帮助。
您快要准备好了-标准JS中没有window.event
对象。 因此,请使用DOM事件接口 :
function moveit(e) {
"use strict";
document.getElementById("position").style.left = e.clientX + "px";
}
window.onload = function (e) {
"use strict";
findtime();
document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
var mousemove;
document.getElementById("scrollbar").onclick = function () {
mousemove = window.setInterval(moveit, 1000);
};
document.getElementById("scrollbar").mouseup = function () {
window.clearInterval(mousemove);
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.