2545 - 一天前注册会员;
dethrj - 2天前注册会员;
dfghg - 3天前注册会员;
sdfghhj - 3天前注册会员;
444321229@qq.com - 5天前注册会员;
加入我们（2316 ）

html+js模仿知乎滑动效果 

  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">

  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  8.     <title></title>

  9.     <style>

  10.         .big-box{

  11.             position: relative;

  12.             width: 100%;

  13.             display: flex;

  14.             justify-content: center;

  15.             overflow: hidden;

  16.             padding: 10px 0;

  17.             height: 130px;

  18.         }

  19.         .box_1{

  20.             width: 90%;

  21.             margin: auto;

  22.             position: absolute;

  23.             box-shadow: -1px 2px 4px #C2C2C2;

  24.             border-radius: 5px;

  25.             padding: 16px 16px 10px;

  26.             background: #fff;

  27.         }

  28.         .box_1>span{

  29.             display: block;

  30.             padding: 2px 0;

  31.             overflow: hidden;

  32.             white-space: nowrap;

  33.             text-overflow: ellipsis;

  34.         }

  35.         .box_1>span:nth-child(1){

  36.             color: #333;

  37.             font-size: 17px;

  38.             font-weight: 600;

  39.         }

  40.         .box_1>span:nth-child(2){

  41.             color: #333;

  42.             font-size: 15px;

  43.         }

  44.         .box_1>div{

  45.             display: flex;

  46.             justify-content: space-between;

  47.             align-items: center;

  48.             margin: 20px 0 0;

  49.         }

  50.         .box_1>div>span{

  51.             color: #9B9B9B;

  52.             font-size: 14px;

  53.         }

  54.         .box_1>div>div{

  55.             display: flex;

  56.             align-items: center;

  57.         }

  58.         .box_1>div>div>div{

  59.             margin: 0 10px;

  60.             font-size: 14px;

  61.             padding: 4px 14px;

  62.             border-radius: 2px;

  63.         }

  64.         .box_1>div>div>div:nth-child(1){

  65.             background: #F5F5F5;

  66.             color: #9B9B9B;

  67.         }

  68.         .box_1>div>div>div:nth-child(2){

  69.             background: #E8F4FD;

  70.             color:#386DB0;

  71.         }

  72. 

  73.         .submit_btn{

  74.             margin: 20px auto;

  75.             padding: 8px 0px;

  76.             text-align: center;

  77.             font-size: 14px;

  78.             background: #1386F6;

  79.             border-radius: 3px;

  80.             color: #fff;                

  81.             width: 100px;

  82.             box-shadow: -1px 2px 4px #C2C2C2;

  83.             position:relative;

  84.             overflow: hidden;

  85.             cursor: pointer;

  86.         }

  87.         /* .submit_btn:hover span{

  88.             left: 100%;

  89.             transition: all .5s;

  90.         } */

  91.         .go{

  92.             left: 100% !important;

  93.             transition: all .5s;

  94.         }

  95.         .submit_btn span{

  96.             position: absolute;

  97.             top:0;

  98.             bottom: 0;

  99.             left: 0;

  100.             width: 100px;

  101.             background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));

  102.             left: -100%;

  103.             transform: rotate(-50deg);

  104.         }

  105.     </style>

  106. </head>

  107. <body>

  108.     <div class="big-box">

  109.     </div>

  110. 

  111.     <div class="submit_btn">提交<span></span></div>

  112. 

  113.     <script>

  114.         let dataList = [ //第一次请求的数据

  115.             {

  116.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  117.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  118.                 guanzhu:'12',

  119.             },

  120.             {

  121.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  122.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  123.                 guanzhu:'12',

  124.             },

  125.             {

  126.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  127.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  128.                 guanzhu:'12',

  129.             },

  130.             {

  131.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  132.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  133.                 guanzhu:'12',

  134.             },

  135.             {

  136.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  137.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  138.                 guanzhu:'12',

  139.             },

  140.             {

  141.                 title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  142.                 title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  143.                 guanzhu:'12',

  144.             }

  145.         ];

  146.         let box_1 = document.getElementsByClassName('box_1'); //获取dom

  147. 

  148.         let html = '',index = 0,z_index = dataList.length;

  149.         for(let item of dataList){

  150.             index++,z_index--;

  151.             html+=`<div class="box_1 boxs_${index}" style="z-index: ${z_index}; opacity: ${index>2?0:1}; ${index == 2?'top: 22px;; transform: scale(.96);':''} ">

  152.                 <span>${item.title1}</span>

  153.                 <span>${item.title2}</span>

  154.                 <div>

  155.                     <span>${item.guanzhu}人关注</span>

  156.                     <div>

  157.                         <div>忽略</div>

  158.                         <div>回答</div>

  159.                     </div>

  160.                 </div>

  161.             </div>`

  162.         }

  163.         document.getElementsByClassName('big-box')[0].innerHTML = html;

  164.         for(let i in dataList){

  165.             i++

  166.             let doc = document.getElementsByClassName('boxs_'+i)[0]

  167.             touchevent(doc,i) //注入滑动事件

  168.         }

  169. 

  170.         function touchevent(target,i){

  171.             let pageX,startX,offsetLeft,lefts,endpageX;

  172.             return target.addEventListener('touchstart',function(e){

  173.                     console.log(target.previousSibling)

  174.                     if(target.previousSibling){

  175.                         if(target.previousSibling.style.opacity == 1) return;

  176.                     }

  177. 

  178.                     target.style.cssText = 'z-index:999; opacity:1;'

  179.                     startX = e.targetTouches[0].pageX;

  180.                     offsetLeft = target.offsetLeft;

  181.                 }),target.addEventListener('touchmove',function(e){

  182.                     if(target.previousSibling){

  183.                         if(target.previousSibling.style.opacity == 1) return;

  184.                     }

  185. 

  186.                     e.preventDefault()

  187.                     pageX = e.targetTouches[0].pageX;

  188.                     let left = pageX - startX + parseInt(offsetLeft)

  189.                     lefts = left

  190.                     target.style.cssText = 'z-index:999; left:'+left+'px; opacity:1;'

  191.                 }),target.addEventListener('touchend',function(e){

  192.                     if(target.previousSibling){

  193.                         if(target.previousSibling.style.opacity == 1) return;

  194.                     }

  195. 

  196.                     if(i == dataList.length)lefts = 0;

  197.                     endpageX = e.changedTouches[0].pageX;

  198.                     if(endpageX === startX)return;

  199.                     if(lefts<=-70){

  200.                         target.style.cssText = 'left: -110%; transition:all .3s; z-index:999; opacity:0;'

  201.                         next(target,i);

  202.                     }else if(lefts>=70){

  203.                         target.style.cssText = 'left: 110%; transition:all .3s; z-index:999; opacity:0;'

  204.                         next(target,i);

  205.                     }else{

  206.                         target.style.cssText = 'left: '+offsetLeft+'px; transition:all .3s; z-index:999; opacity:1;'

  207.                         setTimeout(() => {

  208.                             target.style.cssText = 'left: '+offsetLeft+'px; z-index:999; opacity:1;';

  209.                         }, 300);

  210.                     }

  211.                 })

  212.         };

  213.         

  214.         function next(target,i){

  215.             if(i == dataList.length -2){ console.log('执行下一页');page() }

  216.             i++;

  217.             document.getElementsByClassName('boxs_'+i)[0].style.cssText = 'opacity: 1; transform: scale(1); transition:all .3s; z-index:999; top:10px;'

  218.             i++;

  219.             document.getElementsByClassName('boxs_'+i)[0].style.cssText = 'opacity: 1; transform: scale(.96); transition:all .3s; z-index:99; top:22px;'

  220.         }

  221. 

  222.         function page(){

  223.             let pageList = [ //请求下一页的数据

  224.                 {

  225.                     title1:'我是下一页',

  226.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  227.                     guanzhu:'12',

  228.                 },

  229.                 {

  230.                     title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  231.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  232.                     guanzhu:'12',

  233.                 },

  234.                 {

  235.                     title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  236.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  237.                     guanzhu:'12',

  238.                 },

  239.                 {

  240.                     title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  241.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  242.                     guanzhu:'12',

  243.                 },

  244.                 {

  245.                     title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  246.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  247.                     guanzhu:'12',

  248.                 },

  249.                 {

  250.                     title1:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  251.                     title2:'送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发送积分哦啊还发我我都是佛我爱上覅都是佛我爱上覅发',

  252.                     guanzhu:'12',

  253.                 }

  254.             ];

  255.             dataList.push(...pageList)

  256.             let html = '',z_index = dataList.length;

  257.             for(let item of pageList){

  258.                 index++,z_index--;

  259.                 html+=`<div class="box_1 boxs_${index}" style="z-index: ${z_index}; opacity: 0; ${index == 2?'top: 22px;; transform: scale(.96);':''} ">

  260.                     <span>${item.title1}</span>

  261.                     <span>${item.title2}</span>

  262.                     <div>

  263.                         <span>${item.guanzhu}人关注</span>

  264.                         <div>

  265.                             <div>忽略</div>

  266.                             <div>回答</div>

  267.                         </div>

  268.                     </div>

  269.                 </div>`

  270.             }

  271. 

  272.             $(".big-box").append(html)

  273.             let indexs = index - pageList.length

  274.             for(let i in pageList){

  275.                 indexs++

  276.                 let doc = document.getElementsByClassName('boxs_'+indexs)[0]

  277.                 touchevent(doc,indexs)

  278.             }

  279.         }

  280.     

  281.         let btn = document.getElementsByClassName('submit_btn')[0];

  282.         btn.onclick = function(e){

  283.             this.children[0].classList.add('go')

  284.             console.log(this.children)

  285.             setTimeout(() => {

  286.                 this.children[0].classList.remove('go')

  287.             }, 500); 

  288.         }

  289.     </script>

  290.     

  291. </body>

  292. </html>

  293.
文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/136
滑动 知乎
0 评论
2.7k

发表评论

相关推荐

随机推荐

小灯泡设计

形式在改 初心不变

热门主题 AI+客服

热门文章

自媒体博客Spimes主题44w 阅读

Spimes主题专为博客、自媒体、资讯类的网站设计....

Splity博客双栏主题14w 阅读

仿制主题，Typecho博客主题，昼夜双版设计，可....

vCard主题个人简历主题13w 阅读

一款个人简历主题，可以简单搭建一下，具体也比较简单....

Spzac个人资讯下载类主题12w 阅读

用于作品展示、资源下载，行业垂直性网站、个人博客，....

热评文章

自媒体博客Spimes主题424 评论
Splity博客双栏主题191 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题31 评论
vCard主题个人简历主题29 评论
Pure轻简主题29 评论

最新评论

chenyu

一天前

能不能支持deepseek

油腻男

5天前

感谢分享😀

xiao

3月15日

有个人中心对接tepass插件的教程吗

nobestirn

3月11日

你好，7.5版本我点击下载，提示拒绝访问

chenyu

2月19日

[已回复]

怎么配置主题 没看到教程

!