移动端开发案例

最新推荐文章于 2024-02-23 17:03:14 发布

无区新手

最新推荐文章于 2024-02-23 17:03:14 发布

阅读量829

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40660787/article/details/105161185

版权

JavaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Pink老师整理

移动端拖动元素

touchstart、touchmove、touchend 可以实现拖动元素
但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步曲：

触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置
移动手指 touchmove：计算手指的滑动距离，并且移动盒子
离开手指 touchend:

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
        // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
        // （3） 离开手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
        });
    </script>
</body>

</html>

移动端轮播图案例

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/index.css">
		<title>携程在手，说走就走</title>
		<style>
			body {
				max-width: 540px;
				min-width: 320px;
				margin: 0 auto;
				font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
				color: #000;
				background: #f2f2f2;
				overflow-x: hidden;
				-webkit-tap-highlight-color: transparent;
			}

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: #222;
			}

			div {
				box-sizing: border-box;
			}

			.focus {
				position: relative;
				padding-top: 44px;
				overflow: hidden;
			}

			.focus img {
				width: 100%;
			}

			.focus ul {
				overflow: hidden;
				width: 500%;
				margin-left: -100%;
			}

			.focus ul li {
				float: left;
				width: 20%;
			}

			.focus ol {
				position: absolute;
				bottom: 5px;
				right: 5px;
				margin: 0;
			}

			.focus ol li {
				display: inline-block;
				width: 5px;
				height: 5px;
				background-color: #fff;
				list-style: none;
				border-radius: 2px;
				transition: all .3s;
			}

			.focus ol li.current {
				width: 15px;
			}
		</style>
		<script>
			window.addEventListener('load', function() {

				// 1. 获取元素 
				var focus = document.querySelector('.focus');
				var ul = focus.children[0];
				// 获得focus 的宽度
				var w = focus.offsetWidth;
				var ol = focus.children[1];
				// 2. 利用定时器自动轮播图图片
				var index = 0;
				var timer = setInterval(function() {
					index++;
					var translatex = -index * w;
					ul.style.transition = 'all .3s';
					ul.style.transform = 'translateX(' + translatex + 'px)';
				}, 2000);

				// 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend 
				ul.addEventListener('transitionend', function() {
					// 无缝滚动
					if (index >= 3) {
						index = 0;
						// console.log(index);
						// 去掉过渡效果 这样让我们的ul 快速的跳到目标位置
						ul.style.transition = 'none';
						// 利用最新的索引号乘以宽度 去滚动图片
						var translatex = -index * w;
						ul.style.transform = 'translateX(' + translatex + 'px)';
					} else if (index < 0) {
						index = 2;
						ul.style.transition = 'none';
						// 利用最新的索引号乘以宽度 去滚动图片
						var translatex = -index * w;
						ul.style.transform = 'translateX(' + translatex + 'px)';
					}
					// 3. 小圆点跟随变化
					// 把ol里面li带有current类名的选出来去掉类名 remove
					ol.querySelector('.current').classList.remove('current');
					// 让当前索引号 的小li 加上 current   add
					ol.children[index].classList.add('current');
				});

				// 4. 手指滑动轮播图 
				// 触摸元素 touchstart： 获取手指初始坐标
				var startX = 0;
				var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量
				var flag = false;
				ul.addEventListener('touchstart', function(e) {
					startX = e.targetTouches[0].pageX;
					// 手指触摸的时候就停止定时器
					clearInterval(timer);
				});

				// 移动手指 touchmove： 计算手指的滑动距离， 并且移动盒子
				ul.addEventListener('touchmove', function(e) {
					// 计算移动距离
					moveX = e.targetTouches[0].pageX - startX;
					// 移动盒子：  盒子原来的位置 + 手指移动的距离 
					var translatex = -index * w + moveX;
					// 手指拖动的时候，不需要动画效果所以要取消过渡效果
					ul.style.transition = 'none';
					ul.style.transform = 'translateX(' + translatex + 'px)';
					flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
					e.preventDefault(); // 阻止滚动屏幕的行为
				});

				// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
				ul.addEventListener('touchend', function(e) {
					if (flag) {
						// (1) 如果移动距离大于50像素我们就播放上一张或者下一张
						if (Math.abs(moveX) > 50) {
							// 如果是右滑就是 播放上一张 moveX 是正值
							if (moveX > 0) {
								index--;
							} else {
								// 如果是左滑就是 播放下一张 moveX 是负值
								index++;
							}
							var translatex = -index * w;
							ul.style.transition = 'all .3s';
							ul.style.transform = 'translateX(' + translatex + 'px)';
						} else {
							// (2) 如果移动距离小于50像素我们就回弹
							var translatex = -index * w;
							ul.style.transition = 'all .1s';
							ul.style.transform = 'translateX(' + translatex + 'px)';
						}
					}
					// 手指离开的时候就重新开启定时器
					clearInterval(timer);
					timer = setInterval(function() {
						index++;
						var translatex = -index * w;
						ul.style.transition = 'all .3s';
						ul.style.transform = 'translateX(' + translatex + 'px)';
					}, 2000);
				});
				
			})
		</script>
	</head>

	<body>
		<div class="goBack"></div>
		<div class="focus">
			<ul>
				<li><img src="img/focus3.jpg" alt=""></li>
				<li><img src="img/focus1.jpg" alt=""></li>
				<li><img src="img/focus2.jpg" alt=""></li>
				<li><img src="img/focus3.jpg" alt=""></li>
				<li><img src="img/focus1.jpg" alt=""></li>
			</ul>
			<!-- 小圆点 -->
			<ol>
				<li class="current"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</body>

</html>

图片：

视频播放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="zy.media.min.css">
    <script src="zy.media.min.js"></script>
    <style type="text/css">
        #modelView {
            background-color: #DDDDDD;
            z-index: 0;
            opacity: 0.7;
            height: 100%;
            width: 100%;
            position: relative;
        }
        
        .playvideo {
            padding-top: auto;
            z-index: 9999;
            position: relative;
            width: 300px;
            height: 200px;
        }
        
        .zy_media {
            z-index: 999999999
        }
    </style>

</head>

<body>

    <div class="playvideo">
        <div class="zy_media">
            <video data-config='{"mediaTitle": "小蝴蝶"}'>
                    <source src="mov.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>

        </div>
        <div id="modelView">&nbsp;</div>
    </div>
    <script>
        zymedia('video', {
            autoplay: false
        });
    </script>

</body>

</html>

css：

body{margin:0}.zy_media{background:#000;position:relative}.zy_media video,.zy_media audio{width:100%;position:absolute;top:0;left:0;display:block}.zy_fullscreen{overflow:hidden}.zy_fullscreen .zy_media{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1000}.zy_fullscreen .zy_wrap,.zy_fullscreen video{width:100%;height:100%}.zy_wrap{width:100%}.zy_title{height:34px;padding-left:10px;color:#fff;font-size:12px;line-height:34px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:rgba(0,0,0,.25);position:absolute;left:0;right:0;top:0;-webkit-transition:top .5s;transition:top .5s}.zy_media .dec_play,.zy_media .dec_loading,.zy_media .dec_error{margin:-32px 0 0 -31px;position:absolute;top:50%;left:50%}.zy_media .dec_play::before{width:60px;height:60px;content:'';border-radius:60px;border:#e5e5e4 1px solid;display:block}.zy_media .dec_play::after{width:0;height:0;content:'';border-color:transparent transparent transparent #e5e5e4;border-width:14px 20px;border-style:solid;position:absolute;top:16px;left:23px;z-index:2;display:block}.zy_media .dec_loading{width:62px;height:62px;-webkit-animation:ani_loading .6s infinite linear;-webkit-animation-fill-mode:forwards;animation:ani_loading .6s infinite linear;animation-fill-mode:forwards}@-webkit-keyframes ani_loading{100%{-webkit-transform:rotate(360deg)}}@keyframes ani_loading{100%{transform:rotate(360deg)}}.zy_media .dec_loading::before{width:7px;height:7px;content:'';border-radius:7px;background:#fff;opacity:.8;position:absolute;top:25px}.zy_media .dec_loading::after{width:48px;height:48px;content:'';border-radius:50px;border:7px solid #fff;opacity:.2;display:block}.zy_media .dec_error{width:62px;height:62px;margin-top:-53px;margin-left:-25px;white-space:nowrap;color:#fff;font-size:12px;text-align:center;position:absolute;top:50%;left:50%}.zy_controls{height:44px;background:rgba(0,0,0,.55);position:absolute;left:0;right:0;bottom:0;-webkit-transition:bottom .5s;transition:bottom .5s;display:-webkit-box;display:box;display:-webkit-flex;display:flex}.zy_playpause_btn{width:26px;height:30px;margin-right:4px;padding:13px 0 0 14px;position:relative}.zy_play::before{width:0;height:0;content:'';border-color:transparent transparent transparent #cbcbcb;border-width:8px 12px;border-style:solid;display:block}.zy_pause::before,.zy_pause::after{width:3px;height:14px;content:'';background:#cbcbcb;position:absolute;top:13px;left:14px}.zy_pause::after{left:22px}.zy_timeline{margin-right:10px;-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto}.zy_timeline_slider{width:100%;height:1px;background:#999;position:relative;top:21px;left:0}.zy_timeline_buffering{width:100%;height:15px;top:-7px;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.15)),color-stop(.75,rgba(255,255,255,.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;background-size:15px 15px;-webkit-animation:ani_buffering 2s linear infinite;animation:ani_buffering 2s linear infinite;position:absolute}@-webkit-keyframes ani_buffering{from{background-position:0 0}to{background-position:30px 0}}@keyframes ani_buffering{from{background-position:0 0}to{background-position:30px 0}}.zy_timeline_loaded{width:0;height:1px;background:#e5e5e5;position:absolute;top:0;left:0;z-index:1}.zy_timeline_current{width:0;height:1px;background:#ff6159;position:relative;z-index:2}.zy_timeline_handle{width:16px;height:16px;border-radius:16px;background:#e5e5e5;position:absolute;top:-8px;left:-8px;z-index:3}.zy_time{width:auto;height:44px;margin-right:5px;line-height:44px;font-size:11px;color:#999;text-align:center}.zy_time .zy_currenttime{color:#e5e5e5}.zy_fullscreen_btn{width:38px;height:44px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAAEsY2FrAAAAElBMVEX///+65XQCAAAABXRSTlMAHm1u3TG+li4AAAB5SURBVBgZBcGxbQNBEAQwPnCXC49TviU4UQnKx8ZP/62YVB58qQCIBwArGgAAwK4HkAUEgEXAEmBFG/AH+B0gN5BrQLwAAG4bXLOBewPXB/AGu6VtG4CeAUCdAaCcAVCcAQAAAAMAzrAD4IwdAM7PDgDOJwBt2wAA/9uDEjcL3fqtAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center;-webkit-background-size:16px;background-size:16px}.zy_unfullscreen{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAAEsY2FrAAAAElBMVEX///+65XQCAAAABXRSTlMAHm1u3TG+li4AAAB5SURBVBgZBcGxDcMwEAQwGtH1QuD0WiGAB8gI39z+q4SEhR8AwALAwmAwgCAIS4AV0BYg7UAWEIttwNeA1x7gO8BrQDsAAGlBDpA3kOuAeIO4eDYZAM+WAeDZGQA8nwFo2w4AAAAAANq2A9D7AKDuA0C5D4DiPgDAH9lBEChOLXSRAAAAAElFTkSuQmCC)}

zy.media.min.js

https://download.csdn.net/download/qq_40660787/12278208

无区新手

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
移动端开发案例

Pink老师整理移动端拖动元素touchstart、touchmove、touchend 可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离手指移动的距离：手指滑动中的位置...
复制链接

扫一扫