Instead of using
$("#frame").html(frame);
You could try dividing by something:
$("#frame").html(Math.floor(frame / 5));
The above code will make it 5 times slower.
質問
Here is the current code(mouse down and drag to increase and decrease frame): http://jsfiddle.net/QHkfJ/
mousedown = false;
frame = 0;
mouse_x_last = 0;
$(document).ready
(
function()
{
$("#load_overlay").mousedown
(
function()
{
mousedown = true;
}
);
$("#load_overlay").mouseup
(
function()
{
mousedown = false;
}
);
$("#load_overlay").mouseleave
(
function()
{
mousedown = false;
}
);
$(window).mousemove
(
function(event)
{
mouse_x = event.pageX;
if(mousedown == true)
{
//if our current mouse position is greater than our last
if(mouse_x > mouse_x_last)
{
//if our frame is within the array
if(frame < 45)
{
//advance frame
frame++
//update debug frame#
$("#frame").html(frame);
}
else
{
//if our frame tries to exceed the array, reset to frame 0
frame = 0;
}
//set our last mouse position
mouse_x_last = mouse_x;
}
//if our current mouse position is lesser than our last
if(mouse_x < mouse_x_last)
{
//if our frame is within the array
if(frame > 0)
{
//decline frame
frame--
//update debug frame#
$("#frame").html(frame);
}
else
{
//if our frame tries to exceed the array, reset to set to 45
frame = 45;
}
//set our last mouse position
mouse_x_last = mouse_x;
}
}
}
);
}
);
My issue is the rate in which the ++ & -- increase the "frame". I would like a method to slow down that rate.
Thanks a lot.
解決
Instead of using
$("#frame").html(frame);
You could try dividing by something:
$("#frame").html(Math.floor(frame / 5));
The above code will make it 5 times slower.
他のヒント
Here's my take on your idea. Define a width where the mouse is changing the frame rate. Set WIDTH accordingly.
Fiddle: http://jsfiddle.net/QHkfJ/5/
$( function() {
var mouseX,
frames = 0,
isMousedown = false,
WIDTH = 200, // Number of pixels, increase to slow down
FRAMES_MAX = 45,
framesInit = frame,
ratio = FRAMES_MAX / WIDTH,
$frame = $("#frame");
$( "#load_overlay" ).on ( "mousedown", function( event ) {
isMousedown = true;
mouseX = event.pageX;
framesInit = parseInt( $frame.text(), 10 );
}).on( "mouseup mouseleave", function() {
isMousedown = false;
});
$( window ).on( "mousemove", function(event) {
if( !isMousedown ) {
return false;
}
var x = event.pageX,
dx = x - mouseX,
diff = Math.max( Math.min( dx, WIDTH), -WIDTH );
frames = Math.min( Math.max( parseInt( ratio * diff, 10 ), 0 ), FRAMES_MAX );
$frame.text( frames );
});
});