iPhoneX下拉特效

来源：互联网发布：博弈矩阵怎么看编辑：程序博客网时间：2024/06/09 21:39

代码如下所示:

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Document</title><style>body,ul{padding:0px;margin:0px;}li{list-style:none;}#body{width:400px;height:200px;border:10px solid black;border-radius:10px;margin:30px auto;position:relative;}#content {    width: 100%;    height: 100%;    border-radius: 10px;    border: 5px solid black;    transform: translate(-5px,-5px);    overflow:auto;} #content::-webkit-scrollbar{padding-left:100px;} ul{padding-left:10px;}li{line-height:24px;}.camera {    height: 100px;    width: 16px;    background-color: black;    position: absolute;    top: 45px;    left: 0px;    border-top-right-radius: 18px;    border-bottom-right-radius: 18px;}</style></head><body><div id="body"><div id="content"><ul><li>测试数据1</li><li>测试数据2</li><li>测试数据3</li><li>测试数据4</li><li>测试数据5</li><li>测试数据6</li><li>测试数据7</li><li>测试数据8</li><li>测试数据9</li><li>测试数据10</li><li>测试数据1</li><li>测试数据2</li><li>测试数据3</li><li>测试数据4</li><li>测试数据5</li><li>测试数据6</li><li>测试数据7</li><li>测试数据8</li><li>测试数据9</li><li>测试数据10</li><li>测试数据1</li><li>测试数据2</li></ul></div><div class="camera"></div></div><script>(function ma(){var thresh=18,   //定义纵向间距liOffset=20;    //定义横向偏移量var aLi=document.getElementsByTagName("li");    //获取所有下拉列表项var camera=document.querySelector(".camera");//获取边框左边的黑色镜头区var cameraRect=camera.getBoundingClientRect();//获取镜头的位置信息var content=document.getElementById("content");//获取内容显示区域content.onscroll=ma;//内容滚动时,触发时间,可以arguments.callefor(var item of aLi){var itemRect=item.getBoundingClientRect();var tfb=cameraRect.top-itemRect.bottom;var bfb=cameraRect.bottom-itemRect.bottom;if(Math.abs(tfb)<=thresh){item.style.transform="translateX("+getLengh(0,liOffset,getTime(thresh,tfb))+"px)";//console.log("进入");}else if((tfb<0)&&(bfb>thresh)){item.style.transform="translateX("+liOffset+"px)";}else if(Math.abs(bfb)<=thresh){item.style.transform="translateX("+getLengh(liOffset,0,getTime(thresh,bfb))+"px)";}else{item.style.transform="translateX(0px)";}}})();/*以下为纯函数*getLength:根据百分比获取横向偏移量获取*getTime:根据纵向获取百分比*/function getLengh(p0,p1,t){return p0+(p1-p0)*t;}function getTime(p0,p1){  //20 -->-20return (p0-p1)/(p0*2);}</script></body></html>

显示效果:

知识点:

1,HTML5的API接口getBoundingClientRect(),可以在JS中获取页面元素的位置信息，包括top、right、bottom、left、width、height等元素位置、属性信息。
console.log(document.getElementById("demo").getBoundingClientRect());

2,前端优化，遵循高内聚，低耦合的准则
将业务代码归在一起，算法代码（纯函数）单独建立

纯函数概念：
1、代码内容仅仅只用到了传入的参数；
2、没有影响到任何外面的参数；
3、不对页面业务产生任何干扰。(执行纯函数后，页面渲染不发生改变)

纯函数是业务逻辑分离出來的逻辑，最好加上注释，便于理解和复用
/**
*@param 差值算法
*@p0:初始状态
*@p1:结束状态
*@t:变化函数
*/

3,arguments.callee调用函数自身
在函数中，使用arguments.callee()可以调用函数本身，相当于面向对象中的递归。但是ES5以后已经不建议使用了，建议使用函数名调用函数自身。

4,在web开发中，当元素内容超出元素盒模型时，我们通常会使用滚动条来显示元素的所有内容，但是浏览器自带的滚动条太丑了，在谷歌浏览器中，我们可以使用伪元素 ::-webkit-scrollbar{} 来自定义滚动条的样式；也可以在滚动条中设置内边距 padding-left:100px; 来隐藏滚动条。

阅读全文

0 0