您的位置：首页 > Web前端 > JQuery

用jquery如何写返回顶部功能和懒加载功能？（附代码）

2016-11-10 00:16 453 查看

一、html：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>返回顶部和懒加载</title>  
    <script src="jquery-3.1.1.min.js"></script>  
    <style>  
        body,html,p{margin:0;padding:0}  
        .container{width:980px;margin:0 auto;background: #ddd}  
        .pr{position:relative;}  
        img{display:block;border:none;}  
        .sideBar{width:40px;height:42px;position:absolute;top:848px;right:20px;background: #eee;padding: 10px 0;}  
        .sideBar:hover{cursor: pointer;background: #ddd;}  
        .sideBar p{padding-left: 6px;font-size:14px;color:#000;}  
        .sideBar p:hover{color:red;}  
        #toTop{width:0;height:0;border-style:solid;border-width:0px 10px 10px 10px;border-color:transparent transparent red transparent; line-height: 0px;_border-color: #000000 #000000 red #000000;_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left: 10px}  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="pr b1">  
            <img src="images/1.jpg" alt="">  
        </div>  
        <div class="pr b2">  
            <img src="images/2.jpg" alt="2">  
        </div>  
        <div class="pr b3">  
            <img src="images/3.jpg" alt="3">  
        </div>  
        <div class="pr b4 bg">  
        </div>  
        <div class="pr b5 bg">  
        </div>  
        <div class="pr b6 bg">  
        </div>  
        <div class="pr b7 bg">  
        </div>  
        <div class="pr b8 bg">  
        </div>  
        <button>点击查看</button>
    </div>  
    <div class="sideBar" style="display:none">  
        <p>返回顶部</p>  
        <div id="toTop"></div>  
    </div>
      
<script>  
/*  
*实现返回顶部  
和懒加载  
*/  
imgkv=new Image()
imgkv.src="images/11.jpg"
$("button").click(function(){
$(".b1 img").attr('src', imgkv.src);
});
    $(window).scroll(function(){  
        var w_s=$(window).scrollTop()
        var w_h=$(window).height()
        var demo="demo";//初始化css变量  
        if (w_s<=100) {  
            $(".sideBar").hide()  
        }else{  
            $(".sideBar").show();  
            lazyloading(demo);  
            $(".sideBar").stop(true).animate({top: ((w_s+w_h)-62)+"px"})  
        }  
    })  
    $(".sideBar").bind('click',function(){  
        $("html,body").animate({scrollTop: 0}, 100)  
        return false;  
    });  
    function lazyloading(css_source){  
        if (!document.getElementById(css_source)) {  
            var link = document.createElement("link");  
            link.type = 'text/css';  
            link.rel = 'stylesheet';  
            link.href = "css/"+css_source+".css";  
            link.id=css_source;  
            document.getElementsByTagName("head")[0].appendChild(link);  
        }   
    }  
  </script>  
</body>  
</html>

二、引用的css:

.bg{width:980px;
background-repeat: no-repeat;
background-position: 0 0;}

.b4{height:370px;
background-image: url(../images/4.jpg);}
.b5{height:410px;
background-image: url(../images/5.jpg);}
.b6{height:330px;
background-image: url(../images/6.jpg);}
.b7{height:360px;
background-image: url(../images/7.jpg);}
.b8{height:390px;
background-image: url(../images/8.jpg);}

三、jquery版本我引用的为最新的

在jquery插件库这个网站可以下载引用（实时更新的）

四、关于图片可以自行找宽为980px的即可

最后：

说下主要原理：

1、返回顶部是绝对定位一个div,然后这个div的display设置为none，然后通过jquery的.scroll()方法来动态改变显示和隐藏，并且同时改变top值。

2、懒加载是监听.scroll()方法来加载未加载css样式文件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航