[英]How do i stop images rotating using mouseover?
我創建了一個旋轉圖像的功能,現在我想做的是當我使用mouseover命令時停止旋轉圖像。 這是我必須讓圖像旋轉的js編碼
var m = {
Z : 100,
xm : 0,
xmm : .25,
ymm : 0,
ym : 0,
mx : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
xR : 0,
nI : 0,
scr : 0,
img : 0,
run : function () {
m.xm += (m.xmm - m.xm) * .1;
if (m.ym < m.nw * .15) m.ym++;
m.xR += m.xm;
for (var i = 0; i < m.nI; i++){
var A = (i * 360 / m.nI) + m.xR;
var x = Math.cos(A * (Math.PI / 180));
var y = Math.sin(A * (Math.PI / 180));
var a = m.img[i];
a.style.width = ''.concat(Math.round(Math.abs(y * m.ym) + y * m.Z), 'px');
a.style.left = ''.concat(Math.round((m.nw * .5) + x * ((m.nw * .5) - (m.nw * .05)) - ((Math.abs(y * m.ym) + y * m.Z) * .5)), 'px');
a.style.height = ''.concat(Math.round(m.ym + y * m.Z), 'px');
a.style.top = ''.concat(Math.round((m.nh * .5) - (m.ym * .5) - x * (m.Z * .5) - (m.ymm * y)), 'px');
a.style.zIndex = 600 + Math.round(y);
m.setOpacity(a, (y * 50) + 100);
}
setTimeout(m.run, 30);
},
我確實沒有詳細閱讀您的代碼,但是您可能可以做的是在函數外部設置一個參數,也許是旋轉圖像的函數的全局參數,將其稱為“ rotate”並將其設置為TRUE
然后,在進行實際旋轉之前,請檢查此“旋轉”參數是否設置為TRUE,如果是,則進行旋轉。
現在,在onmouseover上,您所要做的就是將“旋轉”參數設置為FALSE,然后在setTimeout觸發器到期且函數再次啟動時將其設為FALSE,則圖像不會旋轉,因為它在測試中失敗了。
另一種方法是將setTimeout設置為僅在未在mousenotover上觸發時才觸發,因此,如果在鼠標懸停時,請勿設置超時,否則,請設置超時。
這些只是我在閱讀代碼時想到的兩個主意,我想您可以考慮一下並確定它們是否是您想要的解決方案,如果不是,那么我很想知道您的決定。
干杯。
下一個代碼只是一個近似值,比生產代碼更像是“偽代碼”。 無論如何,都可以根據需要進行修改。
var m = {
run: function() {
this.isRunning = true;
// when complete the cycle
this.cycle = true;
},
play: function() {
this.timeout = setTimeout((function($this){
if($this.animCheck !== undefined) clearInterval($this.animCheck);
$this.run();
})(this), this.frames);
},
pause: function() {
this.animCheck = setInterval((function($this) {
// Obviously, you've to pause the animation when the cycle is finished.
if($this.cycle) clearTimeout($this.timeout);
})(this), this.frames);
return !!this.animCheck;
},
init: function() {
this.frames = 30;
this.isRunning = true;
[the element].addEventListener('mouseover', function() {
if(this.pause()) this.isRunning = false;
})
this.play();
}
};
m.init();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.