相册
北京的冬越来越冷。但是挡不住战士们勇往直前激情（一大清早地铁站依旧还是辣么多人排队~激情四射的）。
今天分享两个电子相册。
动画版：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
overflow: hidden;
}
.Box{
width:100%;
height:100%;
background: url(img/bg.png) no-repeat;
background-size: 100%;
position: relative;
}
.Box>div{
width: 100px;
height:100px;
overflow: hidden;
border-radius: 50%;
position: absolute;
left: 0px;
right: 0;
z-index: 10;
box-shadow: 0 0 20px 2px #999;
}
.img{
width:100%;
height:100%;
opacity: 1;
}
.start{
width:100px;
height:50px;
text-align: center;
margin-top: 120px;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
z-index: 1;
font: 40px/50px "微软雅黑";
}
.btn{
width:100%;
height:50px;
background-color: rgba(106,144,203,0.1);
display: flex;
justify-content: center;
padding:10px;
box-sizing: border-box;
position: absolute;
top:0px;
}
.btn p{
height:30px;
width:130px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
line-height: 30px;
cursor: pointer;
background-color: rgba(255,255,255,.4);
box-shadow: 0 0 10px 1px ;
border-radius: 25px;
/*position: absolute;
left:0;*/
}
</style>
<script id="commomjs" src="commom.js"></script>
<script type="text/javascript">
window.onload = function(){
//获取元素
var divs = document.querySelectorAll('.Box>div');
var start = document.querySelector('.start');
var btn = document.querySelector('.btn');
var timer = null;
var btn_box = document.querySelectorAll('.btn>p');
// console.log(divs[index])
//初始化图片div的初始位置
reset();
function reset(){
for(var i=0;i<divs.length;i++){
divs[i].state = false;
divs[i].style.top = (window.innerHeight-divs[i].offsetHeight)/2+'px';
divs[i].style.left = (window.innerWidth-divs[i].offsetWidth)/2+'px';
}
//初始化start的初始位置
start.style.top = (window.innerHeight-start.offsetHeight)/2+'px';
start.style.left = (window.innerWidth-start.offsetWidth)/2+'px';
}
//处理document的默认事件
document.onmousedown = function(ev){
var ev = ev||event
ev.preventDefault();
return false;
}
//点击开始时图片移动到右下角
start.onclick = function(){
start.style.display = 'none';
for(var i=0;i<divs.length;i++){
divs[i].state = false;
!function(i){
setTimeout(function(){
MTween({
obj:divs[i],
attrs:{
top:window.innerHeight-10-divs[i].offsetHeight+'px',
left:(window.innerWidth-start.offsetWidth)/2+'px'
},
duration:400,
callBack:function(){
for(var i=0;i<divs.length;i++){
MTween({
obj:divs[i],
attrs:{
left:300+i*80+'px',
},
duration:2000,
callBack:function(){
for(var i=0;i<divs.length;i++){
divs[i].state = true;
}
}
})
}
}
})
},50*i);
}(i)
}
}
//拖拽事件
for(var i=0;i<divs.length;i++){
move(divs[i])
}
function move(obj){
obj.onmousedown = function(ev){
if(!obj.state) return;
clearInterval(timer);
var ev = ev||event;
var x1 = ev.clientX;
var y1 = ev.clientY;
var l = obj.offsetLeft;
var t = obj.offsetTop;
this.style.zIndex = 5;
document.onmousemove = function(ev){
var ev = ev||event;
var x2 = ev.clientX;
var y2 = ev.clientY;
var x = x2-x1+l;
var y = y2-y1+t;
for(var i=0;i<divs.length;i++){
if(x<=80)x=0;
if(x>=window.innerWidth-divs[i].offsetWidth-50)x=window.innerWidth-divs[i].offsetWidth;
if(y<=80)y=50;
if(y>=window.innerHeight-50)y=window.innerHeight-divs[i].offsetHeight;
}
obj.style.left = x+'px';
obj.style.top = y+'px';
}
document.onmouseup = function(ev){
if(!obj.state) return;
var m = ev.target;
console.log(m.parentNode.className)
if(m.parentNode.className=='pic_box'){
if(m.parentNode.style.top<window.innerHeight-200+'px'){
m.parentNode.style.borderRadius= '0'
m.parentNode.style.zIndex = '0';
m.parentNode.style.width = '200px';
m.parentNode.style.height = '200px'
}
}
document.onmousemove = null;
}
return false;
document.preventDefault();
}
}
//处理相册的排序
var Reset = document.querySelectorAll('.btn>p')[0];
var random = document.querySelectorAll('.btn>p')[1];
var dir = document.querySelectorAll('.btn>p')[2];
var seriation = document.querySelectorAll('.btn>p')[3];
var freedom = document.querySelectorAll('.btn>p')[4];
//将所有div放入数组中
var arr = [];
for(var i=0;i<divs.length;i++){
arr.push(divs[i]);
}
//处理图片放大后在缩放回圆形
function zoom(){
for(var i=0;i<divs.length;i++){
divs[i].style.borderRadius= '50%'
divs[i].style.zIndex = '10';
divs[i].style.width = '100px';
divs[i].style.height = '100px'
}
}
//集合按钮动画处理
Reset.onclick = function(){
clearInterval(timer);
start.style.display = 'block';
for(var i=0;i<divs.length;i++){
divs[i].state = false
zoom()
MTween({
obj:divs[i],
attrs:{
top:(window.innerHeight-divs[i].offsetHeight)/2+'px',
left:(window.innerWidth-divs[i].offsetWidth)/2+'px'
},
duration:500,
})
}
};
//随机摆放动画处理
random.onclick = function(){
for(var i=0;i<divs.length;i++){
if(!divs[i].state) return;
}
start.style.display = 'none';
zoom();
clearInterval(timer);
for(var i=0;i<divs.length;i++){
MTween({
obj:divs[i],
attrs:{
top:50+Math.round(Math.random()*(window.innerHeight-150))+'px',
left:Math.round(Math.random()*(window.innerWidth-100))+'px',
},
duration:500,
})
}
}
//处理自由活动动画
freedom.onclick = function(){
for(var i=0;i<divs.length;i++){
if(!divs[i].state) return;
}
start.style.display = 'none';
zoom();
clearInterval(timer);
for(var i=0;i<divs.length;i++){
clearInterval(timer);
timer = setInterval(function(){
for(var i=0;i<divs.length;i++){
MTween({
obj:divs[i],
attrs:{
top:50+Math.round(Math.random()*(window.innerHeight-150))+'px',
left:Math.round(Math.random()*(window.innerWidth-100))+'px',
},
duration:2000,
})
}
},10)
}
}
//处理向左向右看齐
dir.onclick = function(){
for(var i=0;i<divs.length;i++){
if(!divs[i].state) return;
}
start.style.display = 'none';
zoom();
arr.reverse();
clearInterval(timer);
for(var i=0;i<divs.length;i++ ){
MTween({
obj:arr[i],
attrs:{
top:(window.innerHeight-divs[i].offsetHeight)/2+'px',
left:200+i*110+'px'
},
duration:1000,
})
}
}
//处理循序排列
seriation.onclick = function(){
for(var i=0;i<divs.length;i++){
if(!divs[i].state) return;
}
start.style.display = 'none';
zoom();
clearInterval(timer);
for(var i=0;i<divs.length;i++){
MTween({
obj:arr[i],
attrs:{
top:((window.innerHeight-divs[i].offsetHeight)/2-divs[i].offsetHeight)+(i*100)-(parseInt(i/3)*300)+'px',
left:((window.innerWidth-divs[i].offsetWidth)/2-divs[i].offsetWidth)+(parseInt(i/3)*100)+'px'
},
duration:1000,
})
}
}
}
</script>
</head>
<body>
<section class="Box">
<header class="btn">
<p class="reset">集合</p>
<p class="random">随机摆放</p>
<p class="dir">向左向右看齐</p>
<p class="seriation">站队</p>
<p class="freedom">自由活动</p>
</header>
<p class="start">start</p>
<div class="pic_box">
<img class="img" src="img/1.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/2.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/3.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/4.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/5.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/6.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/7.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/8.jpg" alt="" />
</div>
<div class="pic_box">
<img class="img" src="img/9.jpg" alt="" />
</div>
</section>
</body>
</html>
因为图片地址是本地地址所以赋效果图给各位大神指点：
各位看客老爷肯定说说好的两个相册呢？
O(∩_∩)O哈哈~别急。。请看下一篇博文~
忘了这个了commom：
var commomjs = document.querySelector('#commomjs'); require(commomjs); function require(obj){ var comSrc = obj.src; //找最后一个 / 位置 var index = comSrc.lastIndexOf('/'); var _dir = comSrc.slice(0,index+1)+'tween.js'; var script = document.createElement('script'); script.src = _dir; obj.parentNode.insertBefore(script,obj); } /* * 获取css属性方法 * */ function getStyle(){ var obj = arguments[0]; var arr = arguments.length>2?{}:''; if(typeof arr=='string'){ arr = !obj.currentStyle?getComputedStyle(obj)[arguments[1]]:obj.currentStyle[arguments[1]]; }else{ for(var i=1;i<arguments.length;i++){ //arr.height = ''; arr[arguments[i]] = !obj.currentStyle?getComputedStyle(obj)[arguments[i]]:obj.currentStyle[arguments[i]]; } } return arr; } /* * 获取元素集合 * */ function $(str){ var dom;//储存找到的元素 if(str.charAt(0)=='.'){ dom = document.getElementsByClassName(str.slice(1)); }else if(str.charAt(0)=='#'){ dom = document.getElementById(str.slice(1)); }else{ dom = document.getElementsByTagName(str); } return dom;//把获取到的元素给到需要用的人 } //封装move function move(obj,attr,speed,end,callBack){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var attrVal = parseFloat(getStyle(obj,attr)); var s = attrVal+speed;//下一帧的位置 if(speed<0){ if(s<=end){ s=end; clearInterval(obj.timer); } } if(speed>0){ if(s>=end){ s=end; clearInterval(obj.timer); } } obj.style[attr] = s +'px'; // if(s==end){ // if(callBack){ // callBack(); // } // callBack&&callBack(); // } if(s==end&&callBack){ //如果到达了目标点，并且有回调函数的情况就执行； callBack(); } },30); } //MTween 时间版的运动函数 /*function MTween(obj,attr,begin,end,duration,unit,way,callBack){ if(obj.isAnim) return; //obj开始运动了 自定义属性 obj.isAnim = true; if(!way){ //如果用户没有选择运动方式就默认匀速 way = 'linear'; } if(!unit){ //如果用户没有传入单位，默认为空 unit = ''; } // console.log(getStyle(obj,'transform')); var start = parseFloat(begin)||parseFloat(getStyle(obj,attr))||0;//起始位置 如果begin未传值，那就就尝试获取传入的属性值，如果属性值获取失败，就默认为0 // console.log(start); // var end = 1000;//目标点 // var duration = 1000;//动画执行的总时间 单位是毫秒 var startTime = Date.now(); var s = end - start; //总路程 // var v = s/duration; //计算出来的速度 //每次20ms走一帧 clearInterval(timer); var timer = 0; timer = setInterval(function(){ // console.log(attr); var endTime = Date.now(); //计算出当前时间 var t = endTime-startTime; if(t>=duration){ t = duration; clearInterval(timer);//到达目标点要清除定时器 } // console.log(t,start,s,duration); // console.log(Tween[way](t,start,s,duration)); obj.style[attr] = Tween[way](t,start,s,duration)+unit; //透明度的兼容处理 if(attr=='opacity'){ obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')'; } //如果是transform的情况 //transform.scale ==> ['transform','scale'] var attr1 = attr.split('.'); // console.log(attr1); if(attr1.length>1&&attr1[0]=='transform'){ //js设置transform的方式： // obj.style.tranform = 'scale(n)'; // console.log(1); if(attr1[1]=='scale'){ obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,start,s,duration)+')'; }else if(attr1[1]=='rotateZ'){ obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,start,s,duration)+'deg)'; } } if(t==duration){ obj.isAnim = false; //等到上一个动画完成 然后再调用 if(callBack){ callBack(); } } },20); }*/ //MTween 时间版的运动函数 function MTween(opt){ //end unit begin var option = { obj:'', begins:{}, attrs:{}, duration:0, way:'linear', callBack:function(){} }; //用传入的参数覆盖默认值 for(var key in option){ if(opt[key]){ option[key] = opt[key]; } } // console.log(option); //为了不再修改下面更多的代码，在这里做一次变量的适配 var obj = option.obj; var attrs = option.attrs; var duration = option.duration; var way = option.way; var callBack = option.callBack; var begins = option.begins; // console.log(Tween[way],way,option.way); // // return; if(obj.isAnim) return; //obj开始运动了 自定义属性 obj.isAnim = true; var starts = {}; //获取传入属性的开始位置 for(var key in attrs){ // console.log(key); starts[key] = parseFloat(begins[key])||parseFloat(getStyle(obj,key))||0; } // console.log(starts); //对应的单位 var uintes = {}; for(var key in attrs){ // console.log(attrs[key]); //不是字符串的直接跳出 if(typeof attrs[key]!='string') continue; var num = parseFloat(attrs[key]); var arr = attrs[key].split(num); // console.log(arr); uintes[key] = arr[1]; } // console.log(uintes); // var start = parseFloat(begin)||parseFloat(getStyle(obj,attr))||0;//起始位置 如果begin未传值，那就就尝试获取传入的属性值，如果属性值获取失败，就默认为0 // console.log(start); // var end = 1000;//目标点 // var duration = 1000;//动画执行的总时间 单位是毫秒 var startTime = Date.now(); //所有的属性的总路程 var allS = {}; for(var key in attrs){ if(key=='transform.scale'){ console.log(attrs[key]); } allS[key] = parseFloat(attrs[key])-starts[key]||0; } // console.log(allS); // var s = end - start; //总路程 // var v = s/duration; //计算出来的速度 //每次20ms走一帧 // console.log(timer); clearInterval(timer); var timer = 0; timer = setInterval(function(){ // console.log(attr); var endTime = Date.now(); //计算出当前时间 var t = endTime-startTime; if(t>=duration){ t = duration; clearInterval(timer);//到达目标点要清除定时器 } // console.log(t,start,s,duration); // console.log(Tween[way](t,start,s,duration)); //运动的属性 for(var key in attrs){ obj.style[key] = Tween[way](t,starts[key],allS[key],duration)+(uintes[key]||''); //透明度的兼容处理 if(key=='opacity'){ obj.style.filter = 'Alpha(opacity='+Tween[way](t,starts[key],allS[key],duration)*100+')'; } //处理scrollTop if(key=='scrollTop'||key=='scrollLeft'){ obj[key] = Tween[way](t,starts[key],allS[key],duration)+(uintes[key]||''); } //transform 的处理 var attr1 = key.split('.'); if(attr1.length>1&&attr1[0]=='transform'){ if(attr1[1]=='scale'){ obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,starts[key],allS[key],duration)+')'; }else if(attr1[1]=='rotateZ'){ obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,starts[key],allS[key],duration)+'deg)'; } } } if(t==duration){ obj.isAnim = false; //等到上一个动画完成 然后再调用 if(callBack){ callBack(obj); } } },20); obj.clearInterval = function(){ clearInterval(timer); obj.isAnim = false; }; } //抖动函数： /* * obj: 抖动的对象 * attr: 抖动的属性 * * */ function shake(obj,attr,s,f,callBack){ // var s = 40; //最大偏移量 // var f = 10; //衰退值 // console.log(obj.isShake); if(obj.isShake) return; obj.isShake = true; var oldSite = parseFloat(getStyle(obj,attr));//抖动之前的位置 // var arr = [-10,10,-5,5,0]; var arr = []; // for(var i=0;i<?;i++){ // arr[i] = -s; // arr[i+1] = s; // } for循环无法实现 改用while循环 while(s>0){ //创造抖动的偏移量集合 arr[arr.length] = -s; arr[arr.length] = s; s -= f; } arr[arr.length] = 0;//加上一个0 // console.log(arr); var num = 0; clearInterval(timer); var timer = 0; timer = setInterval(function(){ obj.style[attr] = oldSite+arr[num]+'px'; if(arr[num]==0){ clearInterval(timer); obj.isShake = false; callBack&&callBack(); } num++; },30); } //补0函数： function format(num){ return num<10?'0'+num:''+num; } //修改search某一个值的函数 如果不传任何参数，将返回一个包含search属性值的对象 function editSearch(name,value,bool){ var search = window.location.search;// typeof => string console.log(search); //如果要修改某个值 先把字符串转成对象 //?user=yinwei&pwd=123456 var info = search.substring(1); //把对应的信息分组 var info = info.split('&'); var searchObj = {}; //info已经是一个数组，需要遍历拆分 for(var i=0;i<info.length;i++){ var arr = info[i].split('='); searchObj[arr[0]] = arr[1]; } if(arguments.length==0){ //如果没有传入任何参数，那么程序就假定用户可能是需要search的对象 return searchObj; } searchObj[name] = value;//改值 //把改好的值在拼接回字符串 var arr = []; var n = 0; for(key in searchObj){ arr[n] = key + '=' +searchObj[key]; n++; } console.log(arr); search = ''; for(var i=0;i<arr.length;i++){ search += arr[i]+'&'; } // console.log(search.slice(0,-1)); if(bool){ //有时候并不希望直接刷新页面 return search.slice(0,-1); } window.location.search = search.slice(0,-1); }
浙公网安备 33010602011771号