2011-09-01 74 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

相關問題