移动端 滑屏

最新推荐文章于 2020-10-19 12:00:23 发布
最新推荐文章于 2020-10-19 12:00:23 发布
阅读量329 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/healer_jjj/article/details/77623753
版权
 

案例分析【移动端滑屏】

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
body,
html {
	position: relative;
	height: 100%;
	overflow: hidden;
}
#wrap {
	height: 100%;
	overflow: hidden;
}
#list {
	margin: 0;
	padding: 0;
	list-style: none;
}
#list  li {
	font: 16px/30px "宋体";
	text-indent: 20px;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<section id="wrap">
	<ul id="list"></ul>
</section>
<script type="text/javascript" src="js/startmove.js"></script>
<script type="text/javascript" src="js/mScroll.js"></script>
<script type="text/javascript">
(function(){
	var inner = "";
	for(var i = 0; i < 300; i++){
		inner += `<li>这是第${i}个li</li>`;
	}
	list.innerHTML = inner;
})();	
/* 添加滑动 */
(function(){
	var wrap = document.querySelector('#wrap');
	mScroll({
		wrap: wrap,
		dir: "y",
		over: "backOut"
	});
})();
</script>

</body>
</html>

js滑动库【mScroll.js】

/*
init: {
	wrap: el, 滑动区域
	//scroll: el, 移动的元素 (一般移动的元素wrap.chilren[0])
	[dir:('x'|'y')] dir 滑动方向默认为Y默认y
	over: "ease","backOut","none" 超出之后，需要怎么处理(ease：平滑回来，backOut：回弹，none:不允许超出)
	showBar: (true||false) 是否显示滚动条,默认值为true
	start:fn 按下时的回调
	move: fn 移动时的回调
	up: fn 抬起时的回调
	end: fn 动画结束时的回调 
}
*/
function mScroll(init){
	var IN = { //配置参数
		dir: "y",
		over: "backOut",
		showBar: true
	};
	for(var s in init){
		IN[s] = init[s];
	}
	IN.scroll = IN.wrap.children[0];//被滑动的元素
	var startPoint = {};//初始手指位置
	var startElOffset = {};//初始元素位置
	var lastSpeed = 0;
	var lastTime = 0;
	var lastP = 0;
	var bar;
	var scale = 1;
	var MaxT = {
		x:0,
		y:0
	};
	var MinT = {
		x:0,
		y:0
	};
	var F = .3;//拉力系数
	var isFrist = true;
	var isMove = true;//是否是复合我们要求的方向
	var MoveType = "easeOutStrong";//动画形式
	css(IN.scroll,"translateX",0);
	css(IN.scroll,"translateY",0);
	css(IN.scroll,"translateZ",.01);
	
	//不能让内容比父级高度小，会出问题
	IN.scroll.style.minHeight = "100%";
	IN.scroll.style.minWidth = "100%";

	if(IN.showBar){
		bar = document.createElement("div");
		bar.className = "bar";
		if(getComputedStyle(IN.wrap)["position"] == "static"){
			IN.wrap.style.position = "relative";
		}
		bar.style.cssText = "position:absolute;background:rgba(0,0,0,.4);border-radius:3px;transition:.6s opacity;opacity:0;";
		if(IN.dir == "x"){
			bar.style.cssText += "height:6px;left:0;bottom:0;";
			scale = IN.wrap.clientWidth/IN.scroll.offsetWidth;
			bar.style.width = IN.wrap.clientWidth * scale + "px";
		} else {
			bar.style.cssText += "width:6px;right:0;top:0;";
			scale = IN.wrap.clientHeight/IN.scroll.offsetHeight;
			bar.style.height = IN.wrap.clientHeight * scale + "px";
		}
		IN.wrap.appendChild(bar);
	}
	IN.wrap.addEventListener('touchstart', function(e) {
		clearInterval(IN.scroll.timer);
		IN.start&&IN.start();
		var touch = e.changedTouches[0];
		startPoint = {
			x: touch.pageX,
			y: touch.pageY
		}
		startElOffset = getScroll(); 
		MinT = {
			x: IN.wrap.clientWidth - IN.scroll.offsetWidth,
			y: IN.wrap.clientHeight - IN.scroll.offsetHeight
		};
		lastSpeed = 0;
		lastTime = Date.now();
		lastP = IN.dir == "x"?startPoint.x:startPoint.y;
		isFrist = true;
		isMove = true;
	});
	IN.wrap.addEventListener('touchmove', function(e) {
		if(!isMove){
			return;
		}
		var touch = e.changedTouches[0];
		var nowPoint = {
			x: touch.pageX,
			y: touch.pageY
		};
		var dis = {
			x: nowPoint.x - startPoint.x,
			y: nowPoint.y - startPoint.y
		};
		if(isFrist){
			isFrist = false;
			//第一次移动的时候
			if(Math.abs(dis.x) > Math.abs(dis.y)){
				if(IN.dir == "y"){
					isMove = false;
					return;
				}
			} else {
				if(IN.dir == "x"){
					isMove = false;
					return;
				}
			}
			//按照我们要求在移动的时候，再去显示滚动条
			bar&&(css(bar,"opacity",1));
		}
		var nowTime = Date.now();
		var nowP = IN.dir == "x"?nowPoint.x:nowPoint.y;
		var traslate = {
			x: dis.x + startElOffset.x,
			y: dis.y + startElOffset.y
		}
		if(IN.over == "none"){
			traslate[IN.dir] = Math.min(traslate[IN.dir],MaxT[IN.dir]); 
			traslate[IN.dir] = Math.max(traslate[IN.dir],MinT[IN.dir]); 
		} else if(IN.over == "ease"||IN.over == "backOut"){
			if(traslate[IN.dir] > MaxT[IN.dir]){
				traslate[IN.dir] *= F;
			} else if(traslate[IN.dir] < MinT[IN.dir]) {
				var over = traslate[IN.dir] - MinT[IN.dir];
				over *= F;
				traslate[IN.dir] = MinT[IN.dir] + over;
			}
		}
		if(IN.dir == "x")
		{
			css(IN.scroll,"translateX",traslate.x);

		} else {
			css(IN.scroll,"translateY",traslate.y);
		}
		bar&&(css(bar,IN.dir == "x"?"left":"top",-traslate[IN.dir]*scale));
		lastSpeed = (nowP - lastP)/(nowTime - lastTime);
		lastTime = nowTime;
		lastP = nowP;
		IN.move&&IN.move();
	});
	IN.wrap.addEventListener('touchend', function(e) {
		if(!isMove){
			return;
		}
		if(Date.now()-lastTime > 100){
			lastSpeed = 0;
		}
		lastSpeed = Number(lastSpeed)?lastSpeed:0;
		var time = 120;
		var dis = lastSpeed*time;
		var target = getScroll()[IN.dir] + dis;

		// 目标过界限制
		if(IN.over == "backOut"
		 &&(MaxT[IN.dir] < target||MinT[IN.dir] > target)){
		 	MoveType = "backOut";
		} else {
			MoveType = "easeOutStrong";
		}
		target = Math.min(MaxT[IN.dir],target);
		target = Math.max(MinT[IN.dir],target);
		//重置滑动时间
		time = Math.abs(target - getScroll()[IN.dir])*1.7;

		target = (IN.dir == "x"?{translateX:target}:{translateY:target});

		startMove({
			el: IN.scroll,
			target:target,
			time:time,
			type: MoveType,
			callBack: function(){
				bar&&(css(bar,"opacity",0));
				IN.end&&IN.end();
			},
			callIn: function(){
				var traslate = getScroll();
				bar&&(css(bar,IN.dir == "x"?"left":"top",-traslate[IN.dir]*scale));
				IN.move&&IN.move();
			}
		});
		IN.up&&IN.up();
	});
	function getScroll(){ //获取当前的滚动位置
		return {x:css(IN.scroll,"translateX"),y:css(IN.scroll,"translateY")};
	}
}

案例分析【幻灯片】

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
	margin: 0;
}	
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	vertical-align: top;
}
body,
html {
	position: relative;
	height: 100%;
	overflow: hidden;
}
#wrap {
	height: 100%;
	overflow: hidden;
}
#list  li {
	font: 16px/30px "宋体";
	text-indent: 20px;
	border-bottom: 1px solid #000;
}
#tabPic {
	position: relative;
	overflow: hidden;
}
#pics {
	overflow: hidden;
}
#pics li {
	float: left;
}
#pics img {
	width: 100%;
}
#nav {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	height: 10px;
	text-align: center;
}
#nav a {
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 5px;
	transition: .5s;
}
#nav a.active {
	width: 20px;
	background: #f60;
}
</style>
</head>
<body>
<section id="wrap">
	<div>
		<div id="tabPic">
			<ul id="pics">
				<li>
					<img src="img/img1.jpg"/>
				</li>
				<li>
					<img src="img/img2.jpg"/>
				</li>
				<li>
					<img src="img/img3.jpg"/>
				</li>
				<li>
					<img src="img/img4.jpg"/>
				</li>
			</ul>
			<nav id="nav">
				<a href="javascript:;" class="active"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</nav>
		</div>
		<ul id="list"></ul>
	</div>
</section>
<script type="text/javascript" src="js/startmove.js"></script>
<script type="text/javascript" src="js/mScroll.js"></script>
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
	e.preventDefault();
});
/* 设置幻灯片的布局*/
(function(){
	var style = document.createElement("style");
	var tabPic = document.querySelector('#tabPic');
	var pics = document.querySelector('#pics');
	pics.innerHTML += pics.innerHTML;
	style.innerHTML = `#pics li {width:${tabPic.clientWidth}px}`;
	style.innerHTML += `#pics{width:${tabPic.clientWidth*pics.children.length}px}`;
	document.head.appendChild(style);
})();

/* 幻灯片实现 */
(function(){
	var tabPic = document.querySelector('#tabPic');
	var pics = document.querySelector('#pics');
	var pic = pics.children;
	var navs = document.querySelectorAll('#nav a');
	var picW = pic[0].offsetWidth;
	var now = 0;
	function start(){
		if(now == 0){
			now = navs.length;
		} else if(now == pic.length - 1){
			now = navs.length - 1;
		}
		css(pics,"translateX",-now*picW);
	}
	function up(){
		clearInterval(pics.timer);
		now = -Math.round(css(pics,"translateX")/picW);
		var target = -now*picW;
		startMove({
			el:pics,
			target:{
				translateX: target
			},
			time: 400,
			type: "easeOut"
		});
		for(var i = 0 ; i< navs.length; i++){
			navs[i].className = "";
		}
		navs[now%navs.length].className = "active";
	}
	mScroll({
		wrap:tabPic,
		dir: "x",
		showBar: false,
		over: "none",
		start: start,
		up: up
	});
})();

/* 设置列表内容 */
(function(){
	var inner = "";
	for(var i = 0; i < 300; i++){
		inner += `<li>这是第${i}个li</li>`;
	}
	list.innerHTML = inner;
})();	
/* 添加滑动 */
(function(){
	var wrap = document.querySelector('#wrap');
	mScroll({
		wrap: wrap,
		dir: "y",
		over: "backOut"
	});
})();
</script>

</body>
</html>
Healer_JJJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端滑屏效果
01-14
类似于手机系统，向左向右滑屏，当手指大于20px时，显示下一部分的内容，
PageSlider移动端滑屏组件
08-10
PageSlider 是一个用于移动端滑屏组件，支持上下滑动，左右滑动，禁止滑动等功能，同时支持 AMD 模块化加载方式
JS移动端滑屏事件
weixin_34364135的博客
02-19 142
来看看在pc上面的几个事件：onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生，第一个onmousedown表示鼠标按下，第二个onmousemove表示鼠标移动，第三个onmouseup表示鼠标抬起，虽然在移动端也支持这几个事件，但是性能并不理想，所以我们会用到移动端的按下，移动，抬起事件。 分别是：ontouchstart：手指按下事件  ...
移动端，滑动屏幕
weixin_42029487的博客
01-23 276
//屏幕呈现的三个屏 let first=document.querySelector('.div-first-page') let second=document.querySelector('.div-second-page') let third=document.querySelector('.div-third-page') //添加事件，target：时间目标，down：往下滑，up...
一个基于jquery的滑屏插件（支持移动端手势滑动，滚轮，键盘上下键）
baidu_16685009的博客
05-06 2044
/* @require /statics/js/jquery-1.9.1.min.js*/!function($){ var index = 0, settings = { section: ".panel",//选择器 easing: "linear",//动画效果 scrollSpeed: 300,//动画速度 //scrollbars: true, axis:"y",/...
移动端简单滑屏效果
sxzxiaofeng168的博客
09-08 368
分享一个移动端简单滑屏效果 CSS代码如下： <style> .test{ width: 150px; height: 150px; font-size: 22px; line-height: 150px; text-align: center; background-color: pink; position: absol...
移动端滑屏demo
aler56010的博客
12-28 116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">...
移动端页面滑屏
小吴同志的博客
10-19 510
移动端还是和PC端稍有区别，至少PC端不存在整页滑屏事件。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> <meta nam
移动端滑屏 touch事件
qq_21700537的博客
06-30 377
移动端滑屏 touch事件   移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛，类似于PC端的图片轮播，但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove: //在屏
移动端无缝滑屏(轮播图)
08-04
移动端无缝滑屏(轮播图)
移动端手机H5网页滑屏效果
05-10
移动端H5滑屏网页，上滑屏，动态翻页，有背景音乐，点击可开关。
touchSlide:学习移动端上下滑屏
05-02
touchSlide 学习移动端上下滑屏
grpcio-1.55.0-cp311-cp311-win_amd64.whl
05-30
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
DIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zip
05-30
DIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zip个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目，评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者，可作为课程设计、期末大作业。 DIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption（高分项目）.zipDIP和NLP期末大作业课程设计基于ClipCap实现中文Image Caption。
需要1积分········
最新发布
05-30
···········································································
数据库开发设计-后台系统用户角色菜单sql文件
05-30
基于Mysql数据库，公司后台系统中用户角色菜单的数据表结构设计 支持一个用户多个角色，一个角色多个菜单的功能 其中用户表字段可以根据公司业务需求进行自行增加相关字段以实现相关业务功能
【水声通信】水声通信编码调制联合设计【含Matlab源码 4579期】.zip
05-30
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
SpringBoot项目框架+Mybatis+Mybatis-Plus+JOOQ
05-30
SpringBoot项目框架+Mybatis+Mybatis-Plus+JOOQ
fiddler移动端
10-20
在前端开发过程中或者测试过程中需要在移动端测试时，可以使用Fiddler来解决前端开发移动端实时测试的问题。具体来说，可以在相同局域网内代理到电脑，电脑开启一个服务可以同时多个移动端配置测试。使用Fiddler进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值