Jquery Math for some fancy Idea !
I am working on Project where I have JQuery 1-Page Horizontal scrolling website using JQuery .scrollTo plugin.
I want to show Total x-axis pixels traveled by visitor.
To achieve this I have code which shows开发者_JAVA技巧 visitors current position on screen.
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('.status').html(e.pageX);
});
})
What I want is :
Say, My computer res is 1280px wide. Currently I am on Horizontal Slide 1 so my max distance will be 1280px
But when I move to Slide 2 Though my resolution is constant i.e [1280px] I want to show distance trvelled by visitor is :
2 X screen.width + e.pageX
Same goes for Slide 3 :
3 X screen.width + e.pageX and so on....
How can I achieve this multiplication & addition using JQuery
Thanks.
EDIT :
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('.status').html(e.pageX+screen.width*2);
});
})
above code is doing all what I want but as @Kobi suggest What if User Resize Window ???
You need to define the travel distance calculation in a function and then have it executed whenever one of the four events is fired:
- When the page loads
- When the window is resized
- When the window is scrolling
- When the mouse is moved
Example:
<script type="text/javascript">
// Formula for travel distance
function travelDistance(e)
{
// When loading, resizing, and scrolling,
// the mouse position may not be defined
var xPos = isNaN(e.pageX) ? 0 : e.pageX;
return $(window).scrollLeft() + xPos + "px";
}
$(document).ready(function(e) {
// Initial distance
$("#travelDistance").text(travelDistance(e));
// Distance resizing page
$(window).resize(function(e) {
$("#travelDistance").text(travelDistance(e));
});
// Distance when scrolling
$(window).scroll(function(e) {
$("#travelDistance").text(travelDistance(e));
});
// Distance when moving the mouse
$(window).mousemove(function(e) {
$("#travelDistance").text(travelDistance(e));
});
});
</script>
$(window).scrollLeft()
will give you the distance travelled to the right. So at the first page this will be 0.
if you give some more data then I might be able to better help you further.
精彩评论