zoukankan html css js c++ java

自己写的一段jquery实现当滚动条滑动到某个位置实现向中间移动

js三个小事件：

<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".btn1").click(function() {
                    alert($("div").scrollTop() + " px");
                });
            });
        </script>
    </head>

    <body>
        <div style="border:1px solid black;200px;height:200px;overflow:auto">
            This is some text. 
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        </div>
        <button class="btn1">获得 scrollbar top offset</button>
        <p>试着移动滚动条，然后再次点击按钮。</p>
    </body>

</html>

<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            x = 0;
            $(document).ready(function() {        //让网页全部加载完成后执行一个函数
                $("div").scroll(function() {
                    $("span").text(x += 1);
                });
                $("button").click(function() {
                    $("div").scroll();
                });
            });
        </script>
    </head>

    <body>
        <p>请试着滚动 DIV 中的文本：</p>
        <div style="200px;height:100px;overflow:scroll;">

text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.
            <br /><br /> text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. 
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
        <p>滚动了 <span>0</span> 次。</p>
        <button>触发窗口的 scroll 事件</button>
    </body>

</html>

<html>

    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".btn1").click(function() {
                    $("p").animate({
                        marginLeft: "100px"
                    });
                });
                $(".btn2").click(function() {
                    $("p").animate({
                        marginLeft: ""
                    });
                });
            });
        </script>
    </head>

    <body>
        <p style="background-color:yellow">This is a paragraph.</p>
        <button class="btn1">Animate</button>
        <button class="btn2">Reset</button>
    </body>

</html>

实现回调函数：（一个涉及动画的函数之后来执行语句）

$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});

自己写的：

<script type="text/javascript">
//    $(document).ready(function() {       
//        $(window).scroll(function() {
//            
//            alert($(window).scrollTop() + " px"); 
//                
//            }

    $(document).ready(function() {       
        $(window).scroll(function() {
            
            if(($(window).scrollTop()) > 500){
                $(".f_a").animate({marginLeft: "0px",opacity:'1',speed:"1500"}, function(){
                    $(".f_aa").animate({
                        marginLeft: "0px",
                        opacity:'1',
                        speed: "slow"
                    },2000);
                });
            }
            

            
            if(($(window).scrollTop()) > 500){
                $(".f_b").animate({marginRight: "0px",opacity:'1'},function(){
                    $(".f_bb").animate({
                        marginRight: "0px",
                        opacity:'1'
                    },2000);
                });
            }
            
            
//            $("p").hide(1000,function(){
//                alert("The paragraph is now hidden");
//            });
            
            
            
            if(($(window).scrollTop()) > 1800){
                $(".f_c").animate({marginLeft: "0px",opacity:'1'},function(){
                    $(".f_cc").animate({
                        marginLeft: "0px",
                        opacity:'1'
                    },2000);
                });
            }
            
            
            if(($(window).scrollTop()) > 1800){
                $(".f_d").animate({marginRight: "0px",opacity:'1'},function(){
                    $(".f_dd").animate({
                        marginRight: "0px",
                        opacity:'1'
                    },2000);
                });
            }
            
            
//            if(($(window).scrollTop()) > 3200){
//                $(".f_e").animate({
//                        marginTop: "40px",
//                        opacity:'1'
//                    });
//            }
            
            
            if(($(window).scrollTop()) > 3200){
                $(".f_e").animate({marginTop: "40px",opacity:'1'},function(){
                    $(".f_ee").animate({marginTop: "40px",opacity:'1'},function(){
                        $(".f_eee").animate({
                            marginTop: "40px",
                            opacity:'1'
                        });
                    });
                });
            }
            

            if(($(window).scrollTop()) > 4100){
                $(".f_f").animate({
                        marginTop: "40px",
                        opacity:'1'
                    });
            }

        });
        
    });

</script>

查看全文

相关阅读:
学习日志---4.5.6
学习日志---3
学习日志---2
学习日志---1
阅读《大型网站技术架构：核心原理与案例分析》第五、六、七章
 淘宝网的质量属性的六个常见属性场景
 虚继承 private virtual class
C++ 类中什么时候需要一个operator<
C++ 中关于输出的重定向
 C++ 元编程学习二

原文地址：https://www.cnblogs.com/shandayuan/p/9238664.html