开发者

Jquery Math for some fancy Idea !

开发者 https://www.devze.com 2023-01-23 03:16 出处:网络
I am working on Project where I have JQuery 1-Page Horizontal scrolling website using JQuery .scrollTo plugin.

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消