我的javascript鼠标滚轮动画代码有什么问题?

What's wrong with my javascript mousewheel animation code?

本文关键字：什么 问题 代码 动画 javascript 鼠标 我的      更新时间：2023-09-26

我试着做一个这样的网站:http://www.nominet.uk/

我在jsfiddle中找到了一个对我来说似乎很完美的代码:http://jsfiddle.net/mark_s/6ssRA/1/

但是如果我自己编写代码，只创建一个像这样的html文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {margin:0; padding:0;}
            body { overflow:hidden;}
        </style>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            var winH = $(window).height(),
            $root = $('body, html');
            $('#slider > div').height(winH)
            $(document).ready(function(){
                $(window).on('mousewheel DOMMouseScroll', function(e){
                    e.preventDefault();
                    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
                    //get the current active slide
                    var $active = $('#slider > .active');
                    if(delta < 0) { 
                        //mousewheel down
                        var $next = $active.next();
                        //check if there's a next slide available
                        if($next.length){
                            //animate scrolling to the next slide offset top
                           $root.stop(true).animate({scrollTop:$next.offset().top},'slow');
                           //move also the indicator class 'active'
                                           $next.addClass('active').siblings().removeClass('active');
                        }
                    }else{
                        //mousewheel up
                        var $prev = $active.prev();
                        if($prev.length){
                             //animate scrolling to the previous slide offset top
                            $root.stop(true).animate({scrollTop:$prev.offset().top},'slow'); 
                            $prev.addClass('active').siblings().removeClass('active');
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="slider">
            <div id="slide1" class="active">slide 1</div>
            <div id="slide2">slide 2</div>
            <div id="slide3">slide 3</div>
        </div>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </body>
</html>

代码不工作。我认为。js包含是错误的。你觉得呢?

    var winH = $(window).height(),
    $root = $('body, html');
    // VVVV as you use a selector to find #slider, you should ensure that slider is accessible.
    $('#slider > div').height(winH)

这些部分也应该放入domready中，因为#slider不会在<head>之前呈现，您需要在页面中准备好时访问它。在链接的jsfiddle中，作者只是将加载设置更改为ondomready，因此这些行实际上被包装在另一个domready回调中。

同样，你不需要包含两次jquery，你可以在body的末尾删除jquery。

* {margin:0; padding:0;}
body { overflow:hidden;}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {margin:0; padding:0;}
            body { overflow:hidden;}
        </style>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              var winH = $(window).height(),
              $root = $('body, html');
              // As you put the scripts in head. The slider in body is not render at this time, so you
              // need to put this into domready's callback.
              $('#slider > div').height(winH)
                $(window).on('mousewheel DOMMouseScroll', function(e){
                    e.preventDefault();
                    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
                    //get the current active slide
                    var $active = $('#slider > .active');
                    if(delta < 0) { 
                        //mousewheel down
                        var $next = $active.next();
                        //check if there's a next slide available
                        if($next.length){
                            //animate scrolling to the next slide offset top
                           $root.stop(true).animate({scrollTop:$next.offset().top},'slow');
                           //move also the indicator class 'active'
                                           $next.addClass('active').siblings().removeClass('active');
                        }
                    }else{
                        //mousewheel up
                        var $prev = $active.prev();
                        if($prev.length){
                             //animate scrolling to the previous slide offset top
                            $root.stop(true).animate({scrollTop:$prev.offset().top},'slow'); 
                            $prev.addClass('active').siblings().removeClass('active');
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="slider">
            <div id="slide1" class="active">slide 1</div>
            <div id="slide2">slide 2</div>
            <div id="slide3">slide 3</div>
        </div>
    </body>
</html>

相关文章：