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>

查看全文

相关阅读:
抓取猫眼电影top100的正则、bs4、pyquery、xpath实现方法
 Win实用好用软件清单推荐
 Manjaro安装配置美化字体模糊发虚解决记录
 爬取杭电oj所有题目
 Python爬取微博热搜以及链接
 20191225_Python构造函数知识以及相关注意事项
 java_细节_windows7下记事本保存为utf-8格式的问题
 基础_划分子网
 爬虫_爬取有道每日一句
 算法_基础_伪代码定义以及遵循的规则

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