zoukankan      html  css  js  c++  java
  • 自己写的一段jquery实现当滚动条滑动到某个位置实现向中间移动

    js三个小事件:

    1.

    <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>

    2.

    <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>

    3.

    <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>
  • 相关阅读:
    localStorage溢出问题
    面试题梳理
    灵活的楼梯导航条代码
    日期初始化
    css 控制横向布局,超出隐藏,滚动
    自定义滚动条样式
    jquery源码之JQ对象
    jqeury源码之变量解析
    jquery源码之通篇概要
    工作站流处理
  • 原文地址:https://www.cnblogs.com/shandayuan/p/9238664.html
Copyright © 2011-2022 走看看