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

最新推荐文章于 2023-01-03 00:58:05 发布

dengtan2568

最新推荐文章于 2023-01-03 00:58:05 发布

阅读量580

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shandayuan/p/9238664.html

版权

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;width: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="width: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>

转载于:https://www.cnblogs.com/shandayuan/p/9238664.html

dengtan2568

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己写的一段jquery实现当滚动条滑动到某个位置实现向中间移动

js三个小事件：1.<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type...
复制链接

扫一扫