2011-09-01 42 views
0

我的代码使得多个分区围绕平面上不可见的水平轴进行轨道运行。它是如何工作的:它触发onMouseDown的mouseevent监听器,并捕获用户相对于窗口的光标的X. onMouseUp由一个称为90毫秒后的setTimeout函数模拟,它执行相同的操作,然后减去这两个值以确定旋转的距离和方向。Javascript只适用于IE Quirks,7以及Chrome和Firefox。在IE 8或9中不起作用标准

我的问题是:为什么它在FF,Chrome和IE怪癖和IE 7标准中正常工作,但没有IE 8标准或IE 9标准?

IE8:该模型发生故障,并且该分区离开包含边界分区。 IE9:无论如何JS都没有回应。

下面的内容包括页面上的JavaScript的全部,它可以发现@http://electrifiedpulse.com/360.html

<script type=text/javascript> 
var objectCount = 8; var pixel = new Array(); var size = new Array(); 
var command = "Stop"; var panel = new Array('0','Back','Front','Front','Back','Front','Back','Front','Back'); 
var quadrant = new Array(); var originalSize = 50; 
var WindowWidth = 360; var WindowWidthHalf = WindowWidth/2; var sTime=0; var s1=0; var scrollSpeed; 

var myX, myY; 
function myMove(evt) { 
    if (window.event){myX = event.clientX;myY = event.clientY;} 
    else{myX = evt.clientX;myY = evt.clientY;} 
} 

document.onmousemove = myMove; 
if (!window.event) {document.captureEvents(Event.MOUSEMOVE);} 

function iScrollStop(){ 
sTime = sTime - 10; 
document.getElementById('I_CONTROLS').innerHTML = sTime + ", " + scrollSpeed; 
if(sTime<=0) command = "Stop"; 
else setTimeout(function(){iScrollStop()},10); 
} 

function iScrollPause(){ 
setTimeout(function(){this.checkPause()},100); 
this.checkPause = function(){if(s1>sTime){command="Stop"; sTime=0; s1=0;}} 
} 

var iInitialX; //var d='Up'; 
function iScrollListen(d){ 

if(d=='Down'){ iInitialX = myX; setTimeout(function(){iScrollListen('Up')},90); iScrollPause(); 
}else if(d=='Up'){ 
var spinDirection = 'Right'; 
var iDifference = myX - iInitialX; if(iDifference < 0){ spinDirection = 'Left'; iDifference = Math.abs(iDifference);} 
if (command!=spinDirection){sTime=0;s1=0;} var doScroll=0; if(command=='Stop') doScroll=1; 
command = spinDirection; s1=sTime; sTime+=(iDifference*15); if(s1<=0)iScrollStop(); 
if(doScroll==1) iScroll(); 

} 
} 

function iScrollControl(c){command = c; if((c=='Left')||(c=='Right')) iScroll();} 

function iScroll(){ 
scrollSpeed=(sTime<=1)? 1 : Math.ceil(sTime/1000); 
if(scrollSpeed>=10)scrollSpeed=10; 
scrollSpeed = 15 - scrollSpeed; 

if(command=='Left') pixelDirection=2; 
else if(command=='Right') pixelDirection=(0-2); 
pixelDirectionNeg = (0-pixelDirection); 

for(i=1;i<=objectCount;i++){ 
iObj = document.getElementById("iObject" + i); 
pixel[i] = iObj.offsetLeft; 

if((pixel[i]>=WindowWidthHalf)&&(pixel[i]<=WindowWidth)){ 
if(panel[i]=="Front") quadrant[i] = 4; 
else quadrant[i] = 3; 
} 
if((pixel[i]>=0)&&(pixel[i]<=WindowWidthHalf)){ 
if(panel[i]=="Front") quadrant[i] = 1; 
else quadrant[i] = 2; 
} 




if(quadrant[i]==1){ 
iObj.style.left = pixel[i]-pixelDirection; 
size[i] = (pixel[i]-pixelDirection)*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2); 
Attribute(iObj,size[i]); 
if(pixel[i]-pixelDirection<=0){quadrant[i]=2; panel[i]='Back';} 
if(pixel[i]-pixelDirection>=WindowWidthHalf){quadrant[i]=4; panel[i]='Front';} 
} 

if(quadrant[i]==2){ 
iObj.style.left = pixel[i]-pixelDirectionNeg; 
size[i] = (pixel[i]-pixelDirectionNeg)*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2); 
Attribute(iObj,size[i]); 
if(pixel[i]-pixelDirectionNeg<=0){quadrant[i]=1; panel[i]='Front';} 
if(pixel[i]-pixelDirectionNeg>=WindowWidthHalf){quadrant[i]=3; panel[i]='Back';} 
} 

if(quadrant[i]==3){ 
iObj.style.left = pixel[i]-pixelDirectionNeg; 
size[i] = (WindowWidth-(pixel[i]-pixelDirectionNeg))*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2); 
Attribute(iObj,size[i]); 
if(pixel[i]-pixelDirectionNeg<=WindowWidthHalf){quadrant[i]=2; panel[i]='Back';} 
if(pixel[i]-pixelDirectionNeg>=WindowWidth){quadrant[i]=4; panel[i]='Front';} 
} 

if(quadrant[i]==4){ 
iObj.style.left = pixel[i]-pixelDirection; 
size[i] = (WindowWidth-(pixel[i]-pixelDirection))*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2); 
Attribute(iObj,size[i]); 
if(pixel[i]-pixelDirection<=WindowWidthHalf){quadrant[i]=1; panel[i]='Front';} 
if(pixel[i]-pixelDirection>=WindowWidth){quadrant[i]=3; panel[i]='Back';} 
} 

} 


if((command=='Left')||(command=='Right')) setTimeout(function(){iScroll()},scrollSpeed); 

} 

function Attribute(iObj,s){ 
iObj.style.width = s; iObj.style.height = s; iObj.style.top='50%'; iObj.style.marginTop = (0-(s/2))+"px"; iObj.style.zIndex = s; 
} 

</script> 

我不知道什么可能会或可能不会与你有关的,所以我包括整个脚本。如果你想你可以忽略最长的功能,

iScroll() 
+0

首先看:代码在'非常老'中写:使用.captureEvents()已过时。 –

+2

需要阅读的代码太多;尝试将其缩减为相关部分。 'onmouseup'在拖放或选择时确实可以在Chrome中使用。 –

回答

0

@RyanStortz。尝试在此满耳注册事件:

var isMouseCaptured=false; 
function i_boundary_mousedown(ev) { 
    isMouseCaptured=true; 
    iScrollListen("Down"); 
} 
function doc_mousemove(ev) { 
    if(isMouseCaptured) { 
     ev=ev||event; 
     myX=ev.clientX; 
     myY=ev.clientY; 
    } 
} 
function doc_mouseup(ev) { 
    if(isMouseCaptured) { 
     isMouseCaptured=false; 
     ev=ev||event; 
     myX=ev.clientX; 
     myY=ev.clientY; 
    } 
} 

var i_boundaryObj=document.getElementById('I_BOUNDARY'); 
if(window.addEventListener) { 
    i_boundaryObj.addEventListener('mousedown',i_boundary_mousedown,false); 
    document.addEventListener('mousemove',doc_mousemove,false); 
    document.addEventListener('mouseup',doc_mouseup,false) 
} 
else if(window.attachEvent) { 
    i_boundaryObj.attachEvent('onmousedown',i_boundary_mousedown) 
    document.attachEvent('onmousemove',doc_mousemove); 
    document.attachEvent('onmouseup',doc_mouseup) 
} 
else ;// 

添加DIV带班 “I_BOUNDARY” ID属性 “I_BOUNDARY”,并删除onmousedown事件属性。

+0

谢谢,这更清楚。我实际上通过交易我在维基百科上找到的一个javascript椭圆点生成器使用的数学来得到这个东西。 – RyanStortz

相关问题