请选择 进入手机版 | 继续访问电脑版
猿人社区
查看: 27|回复: 0

[干货] Jquery实现到可视区域DOM显示 包括原生JS

[复制链接]

88

主题

88

帖子

429

积分

管理员

Rank: 9Rank: 9Rank: 9

注册时间
2018-7-24
最后登录
2018-12-8
在线时间
68 小时
威望
18
金钱
293
贡献
12
发表于 2018-11-28 12:13:57 | 显示全部楼层 |阅读模式


Jquery
  1. function showDOM(sdom,x,y,hiddenx,hiddeny){
  2.       let dom=$(sdom); //
  3.       let scrollArea=dom[0].offsetTop - window.innerHeight + dom[0].offsetHeight + (dom[0].offsetHeight / 2);
  4.       if(window.scrollY>=scrollArea){
  5.         $(dom).css({
  6.           opacity:1,
  7.           transform:"translate("+x+","+y+")"
  8.         });
  9.       }else{
  10.         $(dom).css({
  11.           opacity:0,
  12.           transform:"translate("+hiddenx+","+hiddeny+")"
  13.         });
  14.       }
  15.     }

  16.     window.onscroll=function(){
  17.       showDOM(".two_one",0,0,0,"100px");
  18.       showDOM(".two_two",0,0,0,"100px");
  19.       showDOM(".two_th",0,0,0,"100px");
  20.     }
复制代码
showDOM
      sdom:操作的DOM
      x:出现后的X轴位置
      y:出现后的Y轴位置
      hiddenx:隐藏后X轴的位置
      hiddeny:隐藏后Y轴的位置
      scrollArea:
        dom[0].offsetTop:dom距离文档顶部的Y轴距离。
        window.innerHeight:窗口可视区域高度
        dom[0].offsetHeight:dom的高度
        公式:dom[0].offsetTop - window.innerHeight + dom[0].offsetHeight + (dom[0].offsetHeight / 2)
        假如 dom距离顶部是800 窗口高度是600 800减去600剩下200 这200就是滚动条需要滚动的距离 滚动到200就会到dom的位置
        200是滚动的距离 加上dom的高度(150) 350 滚动条滚动到350 就可以完全显示出dom
        滚动到350后 会发现dom是在最底下的 然后加上 dom的高度(150)/2 就是150/2=75 350+75=425
        为什么要用dom的高度/2呢 因为350的时候dom会在底下 一点留白都没有 加上75 流出75像素的高度空白 好看些
        滚动条滚到大于等于425就会让dom显示出来



原生JS实现
  1. function showDOM(sdom,x,y,hiddenx,hiddeny){
  2.       let dom=document.querySelector(sdom);
  3.       let scrollArea=dom.offsetTop - window.innerHeight + dom.offsetHeight + (dom.offsetHeight / 2);
  4.       if(window.scrollY>=scrollArea){
  5.         let cssText="opacity:1;transform:translate("+x+","+y+")";
  6.         dom.style.cssText=cssText;
  7.       }else{
  8.         let cssText="opacity:0;transform:translate("+hiddenx+","+hiddeny+")";
  9.         dom.style.cssText=cssText;
  10.       }
  11.     }

  12.     window.onscroll=function(){
  13.       showDOM(".two_one",0,0,0,"100px");
  14.       showDOM(".two_two",0,0,0,"100px");
  15.       showDOM(".two_th",0,0,0,"100px");
  16.     }
复制代码


CSS
  1. * { padding:0; margin:0; }
  2.     .info { position:fixed; right:10px; top:10px; }

  3.     .main { height:100%; }
  4.     .main .one { text-align:center; height:500px; line-height:400px; width:100%; background:#F5F5F5; }
  5.     .main .one .title { font-size:50px; color:#333; animation:show_title 0.5s; }
  6.     .main .two { width:100%; height:1000px; overflow:hidden; }
  7.     .main .two_box { opacity:0; margin:50px; width:250px; height:120px; border:10px solid #333; border-radius:10px; }
  8.     .main .two_one { transition:all 0.6s linear; }
  9.     .main .two_two { float:right; border-color:#658459; transition:all 0.6s linear; }
  10.     .main .two_th { border-color:#a7512a; transition:all 0.6s; }
  11.     @keyframes show_title{
  12.       0% { font-size:500px; opacity:0.5; }
  13.       50% { font-size:150px; }
  14.       100% { font-size:50px; }
  15.     }
复制代码

要给每个box设置 transition属性不然不会出现滑动的效果




html代码
  1. <div class="main">
  2.     <div class="one">
  3.       <div class="title">
  4.           ONE
  5.       </div>
  6.     </div>
  7.     <div class="two">
  8.       <div class="two_box two_one"></div>
  9.       <div class="two_box two_two"></div>
  10.       <div class="two_box two_th"></div>
  11.     </div>
  12.   </div>
复制代码



全部代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="js/jquery.js"></script>
  9. </head>
  10. <body>
  11.   <style>
  12.     * { padding:0; margin:0; }
  13.     .info { position:fixed; right:10px; top:10px; }

  14.     .main { height:100%; }
  15.     .main .one { text-align:center; height:500px; line-height:400px; width:100%; background:#F5F5F5; }
  16.     .main .one .title { font-size:50px; color:#333; animation:show_title 0.5s; }
  17.     .main .two { width:100%; height:1000px; overflow:hidden; }
  18.     .main .two_box { opacity:0; margin:50px; width:250px; height:120px; border:10px solid #333; border-radius:10px; }
  19.     .main .two_one { transition:all 0.6s linear; }
  20.     .main .two_two { float:right; border-color:#658459; transition:all 0.6s linear; }
  21.     .main .two_th { border-color:#a7512a; transition:all 0.6s; }
  22.     @keyframes show_title{
  23.       0% { font-size:500px; opacity:0.5; }
  24.       50% { font-size:150px; }
  25.       100% { font-size:50px; }
  26.     }
  27.   </style>

  28.   <div class="main">
  29.     <div class="one">
  30.       <div class="title">
  31.           ONE
  32.       </div>
  33.     </div>
  34.     <div class="two">
  35.       <div class="two_box two_one"></div>
  36.       <div class="two_box two_two"></div>
  37.       <div class="two_box two_th"></div>
  38.     </div>
  39.   </div>

  40.   <script>
  41.     function showDOM(sdom,x,y,hiddenx,hiddeny){
  42.       let dom=document.querySelector(sdom);
  43.       let scrollArea=dom.offsetTop - window.innerHeight + dom.offsetHeight + (dom.offsetHeight / 2);
  44.       if(window.scrollY>=scrollArea){
  45.         let cssText="opacity:1;transform:translate("+x+","+y+")";
  46.         dom.style.cssText=cssText;
  47.       }else{
  48.         let cssText="opacity:0;transform:translate("+hiddenx+","+hiddeny+")";
  49.         dom.style.cssText=cssText;
  50.       }
  51.     }

  52.     window.onscroll=function(){
  53.       showDOM(".two_one",0,0,0,"100px");
  54.       showDOM(".two_two",0,0,0,"100px");
  55.       showDOM(".two_th",0,0,0,"100px");
  56.     }
  57.    
  58.   </script>

  59. </body>
  60. </html>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?入住社区

x
您需要登录后才可以回帖 登录 | 入住社区

本版积分规则

Archiver|手机版|小黑屋|Deaf community

GMT+8, 2018-12-12 19:33 , Processed in 0.051107 second(s), 19 queries .

Powered by Discuz! X3.4© 2001-2017 Comsenz Inc. Template design by Penday

快速回复 返回顶部 返回列表