狼丶宇先生的日志

Thank for your coming.

​原生js手机相册制作 原创

2017-07-23 20:58:42
<!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

作者:admin 分类:前端 浏览:562 评论:0