无滚动条切屏

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <title>滑动玻璃窗效果</title> 
  <link rel="stylesheet" href="" /> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
  <style>
        /*初始化,设置边距全部为0*/
        *{margin: 0;padding: 0;font-size: 62.5%;}
        /*设置视窗不显示滚动条*/
        html {
            -ms-overflow-style:none;
            overflow:-moz-scrollbars-none;
        }
        html::-webkit-scrollbar{width:0px}
        .content{
            width: auto;
        }
        .title{
            position: fixed;
            width: 300px;
            height: auto;
            /*border: 1px solid red;*/
            top: 28px;
            left: 108px;
        }
        .title p{
            display: block;
            font-size: 28px;
            color: #fff;
            font-family: "微软雅黑";
        }
        .container{
            width: 100%;
            background-repeat: no-repeat;
            background-size: contain;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .select{
            width: auto;
            height: auto;
            list-style: none;
            position: fixed;
            top: 35%;
            left: 3%;
        }
        .select ul li{
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #fff;
            border-radius: 50%;
            margin-top: 10px;
            cursor:pointer;
        }
        .select ul li.on{
            background-color: #fff;
        }
    </style> 
 </head> 
 <body> 
  <div class="title">
   <p>这就是个标题,没事</p>
  </div> 
  <div class="content"> 
   <div class="container">
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1507722435030&amp;di=b77cd7b284f2e19274352c087f8e486b&amp;imgtype=0&amp;src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F455377.jpg" alt="" />
   </div> 
   <div class="container">
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1507722518086&amp;di=9e1bdb37b57c68de5964794c0973a1a6&amp;imgtype=0&amp;src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1924%2Fntk-1924-20355.jpg" alt="" />
   </div> 
   <div class="container">
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1507722518085&amp;di=a62772dc719b97d36490e6c07c60b7d5&amp;imgtype=0&amp;src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1420%2Fntk-1420-17603.jpg" alt="" />
   </div> 
   <div class="container">
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1507722518084&amp;di=35559b280e396f791cf40e140d755642&amp;imgtype=0&amp;src=http%3A%2F%2Fimg2.niutuku.com%2F1312%2F0823%2F0823-niutuku.com-28127.jpg" alt="" />
   </div> 
   <div class="container">
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1507722518082&amp;di=8c6722e47fa334d00e0d6c4f2eb34445&amp;imgtype=0&amp;src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1956%2Fntk-1956-32474.jpg" alt="" />
   </div> 
  </div> 
  <div class="select"> 
   <ul> 
    <li class="on"></li> 
    <li class=""></li> 
    <li class=""></li> 
    <li class=""></li> 
    <li class=""></li> 
   </ul> 
  </div> 
  <script>
        var index = 0;
        var height = $(window).height();//获取窗口的高度
        $(".container").css("height",height);//设置图片的高度等于窗口的高度
        $(".content").css("height",height);
        $(".select ul li").click(function(){
            $(this).addClass('on').siblings('li').removeClass('on');
            index = $(this).index();
            $('html,body').animate({scrollTop:index*height+'px'},1000);
        });
        setTimeout(function(){
            $(document).scrollTop(0);
        },50)
    </script>  
 </body>
</html>
Copyright © cnkj.site 2021 all right reserved,powered by Gitbook该文件修订时间: 2021-06-01 10:18:49

results matching ""

    No results matching ""