iPhoneX下拉特效

最新推荐文章于 2021-06-03 23:46:08 发布

霜月枫桥

最新推荐文章于 2021-06-03 23:46:08 发布

阅读量1k

点赞数

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78580038

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

代码如下所示:

<!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.οnscrοll=ma;							//内容滚动时,触发时间,可以arguments.calle

		for(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 -->-20
		return (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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iPhoneX下拉特效

代码如下所示: Document body,ul{ padding:0px; margin:0px; } li{ list-style:none; } #body{ width:400px; height:200px; border:10px solid black; border-radius:10px; margin:30px aut
复制链接

扫一扫

专栏目录