Ich habe eine Seite erstellt, die per JavaScript gescrollt wird, aber in einigen Browsern läuft sie nicht sehr flüssig, wenn Sie Text auf die Seite schreiben? Und in Chrome scheint es überhaupt nicht zu funktionieren.
Meine Frage ist:
Was ist die beste Methode zur Erstellung von HTML-Seiten mit flüssigem Bildlauf unter Verwendung von JavaScript, die browserübergreifend funktioniert?
Um eine Vorstellung davon zu bekommen, was ich versucht habe, ist hier die Testseite, die ich erstellt habe.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>test</title>
<style type="text/css">
html
{
overflow:hidden;
}
#fixedtop
{
padding:1%;
position:fixed;
float:left;
vertical-align:middle;
}
table.scollTable td
{
background-color:Gray;
height:12px;
width:12px;
}
table.scollTable td:hover
{
background-color:Lime;
height:20px;
width:20px;
}
.container
{
background:url(http://sstatic.net/so/img/logo.png) repeat;
height:5000px;
width:5000px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="TestPage.aspx" id="form1">
<div>
</script>
<div id="fixedtop">
<table class="scollTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td onmouseover="scroll(-20,-20,this)"></td>
<td onmouseover="scroll(-10,-20,this)"></td>
<td onmouseover="scroll(0,-20,this)"></td>
<td onmouseover="scroll(10,-20,this)"></td>
<td onmouseover="scroll(20,-20,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,-10,this)"></td>
<td onmouseover="scroll(-10,-10,this)"></td>
<td onmouseover="scroll(0,-10,this)"></td>
<td onmouseover="scroll(10,-10,this)"></td>
<td onmouseover="scroll(20,-10,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,0,this)"></td>
<td onmouseover="scroll(-10,0,this)"></td>
<td></td>
<td onmouseover="scroll(10,0,this)"></td>
<td onmouseover="scroll(20,0,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-10,10,this)"></td>
<td onmouseover="scroll(-10,10,this)"></td>
<td onmouseover="scroll(0,10,this)"></td>
<td onmouseover="scroll(10,10,this)"></td>
<td onmouseover="scroll(10,10,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,20,this)"></td>
<td onmouseover="scroll(-10,20,this)"></td>
<td onmouseover="scroll(0,20,this)"></td>
<td onmouseover="scroll(10,20,this)"></td>
<td onmouseover="scroll(20,20,this)"></td>
</tr>
</table>
</div>
<div class="container"></div>
</form>
</body>
</html>
<script id="sTest" type="text/javascript" onload="test()">
function scroll(x,y, elem) {
var iScroll = setInterval(
function() {
SetScroll((x + GetXScroll()), (y + GetYScroll()))
}, 1);
elem.onmouseout = function() { clearInterval(iScroll) };
}
function GetYScroll() {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
}
function GetXScroll() {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
}
function SetScroll(x,y) {
if (document.body.scrollTop) {
document.body.scrollLeft = x;
document.body.scrollTop = y;
}
if(document.documentElement){
document.documentElement.scrollLeft = x;
document.documentElement.scrollTop = y;
}
if (window.pageYOffset) {
try {
window.pageXOffset = x;
window.pageYOffset = y;
} catch (e) { }
}
}
</script>
