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>

查看全文

相关阅读:
十三周课程总结
 第十二周课程总结
 第十一周课程总结
 第十周java总结
 第九周课程总结&实验报告（七）
第八周课程报告&&实验报告六
 第七次学习总结&&第五次实验报告
 第六次学习总结&&第四次实验总结
 同余&逆元简单总结
 原根&离散对数简单总结

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