Javascript

js 照片墙或随机

本文主要是介绍js 照片墙或随机，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}
        ul{position:relative;width:700px;margin:0 auto;border:1px solid ;}
        li{list-style:none;float:left;width:200px;height:200px;margin:0 0 20px 20px;background:red;line-height:200px;color:#fff;font-size:100px;text-align:center;}
    </style>
</head>
<body>
<button>随机</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script src="js/zfdx.js"></script>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li');
    var button=document.getElementsByTagName('button')[0];
    var arr=[];
    var zIndex=1;

    for(var i=0;i<li.length;i++){
        arr.push([li[i].offsetLeft,li[i].offsetTop])
    }
    for(var i=0;i<li.length;i++){
        li[i].style.position='absolute';
        li[i].style.left=arr[i][0]+'px';
        li[i].style.top=arr[i][1]+'px';
        li[i].style.margin=0;
    }
    for(var i=0;i<li.length;i++){
        li[i].index=i;
        Drag(li[i]);
    }
    button.onclick=function () {
        var sjArr=[];
        for(var i=0;i<li.length;i++){
            sjArr+=i;
        }
        var sjarr=sjArr.split('');
        sjarr.sort(function(a,b){
            return Math.random()-.1; //随机数
        });
        console.log(sjarr);
        for(var i=0;i<li.length;i++){
            startMove(li[i],{'left':arr[sjarr[i]][0],'top':arr[sjarr[i]][1]})
        }

    };
    function Drag(obj) {
        var disX=0;
        var disY=0;
        obj.onmousedown=function (ev) {
            zIndex++;
            obj.style.zIndex=zIndex;
            var ev=ev||window.event;
             disX=ev.clientX-obj.offsetLeft;
             disY=ev.clientY-obj.offsetTop;
            document.onmousemove=function (ev) {
                var ev=ev||window.event;
                obj.style.left=ev.clientX-disX+'px';
                obj.style.top=ev.clientY-disY+'px';
                for(var i=0;i<li.length;i++) {
                    li[i].style.border='';
                }
                var mo=minli(obj);
                if(mo){
                    mo.style.border='2px solid blue';
                }
            };
            document.onmouseup=function () {
                document.onmousemove=null;
                document.onmouseout=null;
                var mo = minli(obj);
                var tmp = 0;

                if(mo){
                    startMove( mo , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
                    startMove( obj , { left : arr[mo.index][0] , top : arr[mo.index][1] } );
                    mo.style.border = '';

                    tmp = obj.index;
                    obj.index = mo.index;
                    mo.index = tmp;
                }
                else{
                    startMove( obj , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
                }
            };
            return false;
        }

    }
    console.log(arr);
    function minli(obj) {//最小值,,距离this距离最短的
        var maxNum=9999;
        var index=-1;
        for(var i=0;i<li.length;i++) {
            if(pzjc(obj,li[i]) && obj!=li[i]){
                var c=ggdl(obj,li[i]);
                if(c<maxNum){
                    maxNum=c;
                    index=i;
                }
            }
        }
        if(index != -1){
            return li[index];
        }
        else{
            return false;
        }
    }
    function ggdl(obj1,obj2) { //勾股定理
        var l=obj1.offsetLeft-obj2.offsetLeft;
        var t=obj1.offsetTop-obj2.offsetTop;
        return Math.sqrt(l*l + t*t)
    }
    function pzjc(obj1,obj2) { //碰撞检测
        var L1=obj1.offsetLeft;
        var Lz1=obj1.offsetLeft+obj1.offsetWidth;
        var T1=obj1.offsetTop;
        var Tz1=obj1.offsetTop+obj1.offsetHeight;

        var L2=obj2.offsetLeft;
        var Lz2=obj2.offsetLeft+obj2.offsetWidth;
        var T2=obj2.offsetTop;
        var Tz2=obj2.offsetTop+obj2.offsetHeight;
        if( Lz1<L2 || L1>Lz2 || Tz1<T2 || T1>Tz2 ){
            return false
        }else{
            return true;
        }
    }
</script>
</body>
</html>
这篇关于js 照片墙或随机的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航