Question

当我向下滚动底部时，我的图像正在改变。这很酷。但我只想在这种情况下为我的图像添加淡入淡出效果。演示在这里。

https://dl.dropboxusercontent.com/u/186799776/xampp/htdocs/www/index.html

CODE HERE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
        .hidden {
            position: absolute;
            top: -9999999px;
        }

        #bottommark {
            position: absolute;
            bottom: 0;
        }

        #animation { 
        background-repeat: no-repeat;
        position : fixed; 
        top: 0;
        width: 980px;
        margin: 0 auto;
        }


    </style>









  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
                <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
                <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
                <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
                <img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
                <img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" />
                <div id="bottommark"></div>                
            </div>
            <div class="col-md-3">
                <ul>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>
                    <li><a href="">Test</a></li>

                </ul>
            </div>
        </div>
    </div>


    <div class="another">
        <div class="mian">

            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>

        </div>
    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



    <script>
        $(document).ready(function(){

            $(window).scroll(function(){
                var offset1 = $(document).height();

                var offset = $(window).scrollTop();

                var lineH = offset1 - offset;
                var lineHpart = offset1/5;

                $("span").html(lineH);
                    if (lineH > lineHpart*4) {
                        $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg");
                    }
                    if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
                        $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg");
                    }
                    if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
                        $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg");
                    }
                    if (lineH < lineHpart*2 && lineH > lineHpart*1) {
                        $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg");
                    }
                    if (lineH < lineHpart) {
                        $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg");
                    }
                });
            });
    </script>
  </body>
</html>

Answer 1

$(window).on('scroll',function(){   
                if($(window).scrollTop()){
                    $('#yourImg').animate({opacity:0},1000,function(){});
                }elseif(!($(window).scrollTop())){
                    $('#yourImg').animate({opacity:1},1000,function(){});
                }
});

我没有测试过这段代码，但我认为它会让你开始想要的东西。

Answer 2

这是一个带有解决方案的JSFiddle https://jsfiddle.net/84rqx7dg/

我使用了CSS3转换来淡入淡出并使用JQuery来改变类而不是交换src。

＆＃13;

$(document).ready(function(){

            $(window).scroll(function(){
                var offset1 = $(document).height();

                var offset = $(window).scrollTop();

                var lineH = offset1 - offset;
                var lineHpart = offset1/5;

                $("span").html(lineH);
                    if (lineH > lineHpart*4) {
                        $('.image.active').removeClass('active');
                        $('#img1').addClass('active');
                    }
                    if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
                        $('.image.active').removeClass('active');
                        $('#img2').addClass('active');
                    }
                    if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
                        $('.image.active').removeClass('active');
                        $('#img3').addClass('active');
                    }
                    if (lineH < lineHpart*2 && lineH > lineHpart*1) {
                       $('.image.active').removeClass('active');
                        $('#img4').addClass('active');
                    }
                    if (lineH < lineHpart) {
                        $('.image.active').removeClass('active');
                        $('#img5').addClass('active');
                    }
                });
            });

＆＃13;

.container{
    min-height: 1500px;
}
.image{
    width: 980px;
    position : fixed; 
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transition: all 1s;
}
.active {
    opacity: 1;
}

＆＃13;

<div class="container">
        <div class="row">
            <div class="col-md-9">
                <img id="img1" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
                <img id="img2" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
                <img id="img3" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
                <img id="img4" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
                <img id="img5" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
                <img id="img6" class="image active" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" />
                <div id="bottommark"></div>                
            </div>
            <div class="col-md-3">
                
            </div>
        </div>
    </div>


    <div class="another">
        <div class="mian">

           

        </div>
    </div>

＆＃13;

如何在滚动时添加对图像更改的淡入淡出效果

2 个答案: