相册

2018-06-24 00:57:53来源：未知阅读 ()

北京的冬越来越冷。但是挡不住战士们勇往直前激情（一大清早地铁站依旧还是辣么多人排队~激情四射的）。

今天分享两个电子相册。

动画版：

<!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);

}