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>

查看全文

相关阅读:
spring 心跳更新
 eclipse 控制台输出太多，显示不完整
 String
iOS 开发之如何生成SDK(2)-----生成framework
如何防止自己的APP被Hook
JavaAPI类
 Java面向对象三大特性—封装
 Java类与对象
 Java基础易错点1
Java数组反转及二维数组

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