原生js手机相册制作 原创

最新推荐文章于 2023-02-08 21:29:20 发布
最新推荐文章于 2023-02-08 21:29:20 发布
阅读量793 收藏
点赞数
分类专栏： javascript 前端 文章标签： 移动端 H5 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33270001/article/details/81809281
版权

饭后茶余.写着玩的,适用于初学者做参考的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<title>原生js手机相册制作</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}	
		body{
			font-size: 0.15rem;
			background: #000;
		}	
		a{
			color: #fff;
			text-decoration: none;
		}
		header{
			position: relative;
			width: 3rem;
			height: 0.45rem;
			text-align: center;
			color: #fff;
			line-height: 0.45rem;
			background: #5d5959;
		}
		header a{
			position: absolute;
			top: 0.15rem;
			width: 0.5rem;
			height: 0.25rem;
			box-shadow: 0 0 5px #000;
			line-height: 0.25rem;
			border-radius: 5px;
		}
		header a:nth-child(1){
			display: none;
			left: 15px;
		}
		
		header a:nth-child(2){
			right: 15px;
		}
		section{
			position: relative;
		}
		ul li{
			position:absolute;
			list-style: none;
			width: 1rem;
			height: 1rem;
			border:1px solid #000;
			box-sizing: border-box;
			background-size: 100% 100%;
			transition: left 0.5s, top 0.5s;
		}
		
		footer{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 3rem;
			height: 0.45rem;
			line-height: 0.45rem;
			text-align: center;
			background: #5d5959;
		}
		footer a{
			float: left;
			width: 1.5rem;
			height: 0.45rem;
		}
		footer a:nth-child(1){
			border-right: 1px solid #ccc;
			box-sizing: border-box;
		}
		
	</style>
	<body>
		<header>
			<a href="javascript:;" class="btn">删除</a>
			手机相册
			<a href="javascript:;" class="btn">选择</a>
		</header>
		<section>
			<ul id="content">
				
			</ul>
		</section>
		<footer>
			<a href="javascript:;">手机相册</a>
			<a href="javascript:;">所有相册</a>
		</footer>
	</body>
	<script type="text/javascript">
		function photos(){
			this.removes = [];//存储删除对象
			this.html = '';	//定义添加对象li
			this.mark = true;	//开关
			this.dom = document.getElementsByTagName('html')[0];
			this.oUl = document.getElementById('content');
			this.aLi = this.oUl.getElementsByTagName('li');
			this.btn = document.getElementsByClassName('btn');
			this.init = function(){
				//设置移动端默认
				this.dom.style.fontSize = document.documentElement.clientWidth/3 + 'px';
				window.onresize = function(){
					this.dom.style.fontSize = document.documentElement.clientWidth/3 + 'px';
				}
				//添加对象
				for (var i =1;i<=16; i++) {
					this.html += '<li style="background-image: url(images/'+i+'.jpg);"></li>';
				}
				
				this.oUl.innerHTML = this.html;
				this.positions();
				//给选择按钮监听触摸结束事件，模拟点击
				this.btn[1].addEventListener('touchend',this.selects,false);	
				//删除按钮功能
				this.btn[0].addEventListener('touchend',this.removeLi,false);
			}
			
			this.positions = function(){
				for (var i=0,l=this.aLi.length;i<l;i++) {
					this.aLi[i].style.left = i%3 + 'rem';
					this.aLi[i].style.top =  Math.floor(i/3) +'rem';
				}
			}
			
			
			this.selects = function (){
				if(photos.mark){
					photos.btn[1].innerHTML = '取消';
					//让每个li拥有选择功能
					for (var i=0,l=photos.aLi.length;i<l;i++) {
						photos.aLi[i].index = i;
						photos.aLi[i].onOff = true;//添加一个自定义开关属性
						photos.aLi[i].addEventListener('touchend',photos.selectLi,false);
					}
				}else{
					photos.btn[1].innerHTML = '选择';
					photos.btn[0].style.display = 'none';
					for (var i=0,l=photos.aLi.length;i<l;i++) {
						photos.aLi[i].style.opacity = 1;
						photos.aLi[i].removeEventListener('touchend',photos.selectLi,false);
					}
				}
				photos.mark = !photos.mark; //开关取反
			}
			
			//选择li功能
			this.selectLi = function (){
				if(this.onOff){
					this.style.opacity = 0.3;
					photos.btn[0].style.display = 'block';
					photos.removes.push(this.index); //需要删除的对象
				}else{
					this.style.opacity = 1;
					photos.removes.pop(this.index);
				}
				this.onOff = !this.onOff;
			}
			
			this.removeLi = function (){
				photos.removes = photos.removes.sort(function(a,b){
					 return a - b;
				})				
				//删除并返回最后一个元素
				while(photos.removes.length){
					photos.oUl.removeChild(photos.aLi[photos.removes.pop()]);
				}
				photos.mark = false;
				photos.selects();
				photos.positions();
				photos.btn[0].style.display = 'none';
			}
			
		}
		
		var photos = new photos();
			photos.init();
	</script>
</html>

原生js手机相册制作，面向对象开发过程，适合初学者学习

效果预览点击   http://hao2013.cn/photos/index.html 

pc端请换成手机模式预览，或者直接用手机浏览器打开

demo下载地址：链接：http://pan.baidu.com/s/1o8qNJuE 密码：k78p

参考:http://hao2013.cn/?id=26

狼丶宇先森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生JavaScript制作计算器
10-21
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧
tracking.js 人脸识别（在照片上画框框）
ichigshinyaa的博客
11-14 1120
javascript人脸识别、五官识别
分享78个JS相册代码，总有一款适合您
zy0412326的专栏
02-08 2957
js
javascript dom代码应用：简单的相册
weixin_30696427的博客
06-11 179
　　最近一直对前端开发很感兴趣，特别是在像jquery这种流行ajax类库的帮助下，即使没有很好的javascript功底也能做出不错的动态效果，确实是方便。但我觉得这还不行，毕竟什么都是人家封装好的，得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文，介绍了一个基于js dom编程的相册实例，虽然这个例子很小，但个人认为还是很有学习价值的，先给出html和效果图，这样有助于...
电子相册(html+css+js+jq)——批量读取本地图片并动态添加到页面中（下）
qq_44025638的博客
10-31 1991
2020-10-31 文章首发于知乎文章 电子相册(html+css+js+jq)——批量读取本地图片并动态添加到页面中（下） 作者:落雨湿红尘（也就是我） 导语 本文介绍了作者自己在编写电子相册时，批量读取本地图片的一种方法供大家参考。大致方法流程是 a.运用c语言实现文件读取并形成xml文件 b.再编写js代码对xml文件进行解析并构造元素结点 c.把构造好的元素结点放到html页面中的某个容器标签中 关于作者实现的电子相册效果，可查看以下知乎回答预览 你见过最有新意的七夕..
【毕业季】Three.js动态相册
热门推荐
Mr_Bobcp的博客
06-30 1万+
相册展示和点选切换，利用相机旋转和移动来实现一个点击切图平滑过渡的效果。
原生js代码制作弹性图片相册分页展示
11-17
原生js代码制作弹性图片相册分页展示 原生js代码制作弹性图片相册分页展示 原生js代码制作弹性图片相册分页展示 原生js代码制作弹性图片相册分页展示
网页动画素材 原生JS制作爱心表白特效（抖音资料）
07-14
网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材...
原生js图片相册代码制作点击小图弹出大图查看代码
11-17
原生js图片相册代码制作点击小图弹出大图查看代码 原生js图片相册代码制作点击小图弹出大图查看代码 原生js图片相册代码制作点击小图弹出大图查看代码
原生JS制作爱心表白特效代码
03-20
原生JS制作爱心表白代码是一款卡通人物爱心表白-爱心形状浮动特效。
JS会做的电子相册
05-12
JS制作的电子相册！简单易懂！注释详细！ 可以自动换屏切换多组不同样式的图片，也可以点击图片显示大图，还可以翻屏
纯JS开发的简易相册
12-29
纯JS开发的简易相册 可增减相册，增删图片。无后天 无缓存！
电子相册，js实现的demo
12-19
电子相册，现是一个demo，计划作为，net封装包
js 类似于电子相册
04-19
function playit(){ slidint = setTimeout(playnext,4500); } function stopit(){ clearTimeout(slidint); } window.onload = function(){ playit(); }
js电子相册
03-28
此文件能实现js电子相册的基本功能。鼠标点击向左向右可以实现照片的移动。
js小练习（五）：简易电子相册的制作
我爱吃兔兔的博客
10-08 2524
（一）核心思想： （1）写一个占位模块作为展板，通过getattribute和setattribute来获取点击内容。a标签设置onclick事件return false,获取但不跳转。 （2）考虑到平稳退化，尽可能的不使用内嵌函数。 （3）布局基本使用flex盒子模型。 （二）实现代码： （1）html部分： &amp;amp;lt;!--照片列表--&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; ...
计算机毕业设计Node.js我的大学电子相册(源码+程序+LW+远程调试)
Node程序源码强子
02-01 187
项目运行环境配置：Node.js最新版+ Vs项目技术：Express框架+ Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
零Javascript实现一个简单的相册
zijian555的博客
07-07 248
利用css的属性选择器以及label标签，实现一个简易轮播图
10个精美的js相册(绝对精彩)
03-12
10个显示图片的html页面,可以适用于多种情况。
原生js手机端身份证上传表单提交代码
最新发布
09-12
要实现在手机端上传身份证并提交表单的功能，可以使用原生 JavaScript编写以下代码: HTML部分: ``` <form id="myForm" enctype="multipart/form-data"> <input type="file" accept="image/*" capture="camera" id="idcard" name="idcard" /> <button type="button" onclick="submitForm()">提交</button> </form> ``` JavaScript部分: ```javascript function submitForm() { let formData = new FormData(); // 创建FormData对象 let fileInput = document.getElementById("idcard"); if (fileInput.files.length > 0) { let file = fileInput.files[0]; formData.append("idcard", file); // 将文件添加到FormData对象中 } // 发送表单数据 let xhr = new XMLHttpRequest(); xhr.open("POST", "submit_url", true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 请求成功的处理代码 console.log(xhr.responseText); } }; xhr.send(formData); // 发送FormData对象 } ``` 以上代码中，表单中的文件输入框为`<input type="file">`，通过`capture="camera"`属性可以直接调用手机相机进行拍照或选择相册中的图片。使用`accept="image/*"`限制只能选择图片文件。点击提交按钮时，会调用`submitForm`函数。 函数内部，首先创建一个`FormData`对象用于存储表单数据。然后，从文件输入框中获取选中的文件对象，并将其添加到`FormData`对象中，使用`append`方法。在`xhr`对象上调用`open`方法打开一个POST请求，并设置请求地址。然后，通过`onreadystatechange`函数监听请求状态和响应。最后，使用`send`方法发送`FormData`对象。 你需要将"submit_url"替换为实际的提交地址。在请求成功时，可以根据需要处理响应数据。通过控制台打印`xhr.responseText`，你可以查看服务器返回的内容。 请注意，上传文件可能需要服务器端的相应配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼丶宇先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值