照片墙

最新推荐文章于 2023-06-20 08:31:53 发布

gzn_exclusive

最新推荐文章于 2023-06-20 08:31:53 发布

阅读量261

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/gzn_exclusive/article/details/77069686

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            cursor: pointer;
        }

        .container{
            width: 90%;
            height: 600px;
            margin: 0px auto;
            background-color: lightgray;
            position: relative;
        }

        .border{
            border: 3px solid green;
        }
    </style>

    <script>
        //先为Image扩充方法
        Image.prototype.initParam=function(){
            this.style.position="absolute";
            this.style.top="0px";
            this.style.left="0px";
        }

        //记录下当前最大的z-index索引值
        var maxZIndex=1;
        var container;

        window.onload=function(){
            container=document.getElementById("container");
            for(var i=1;i<=6;i++){
                var div=document.createElement("span");
                container.appendChild(div);
                div.style.display="inline-block";
                div.style.backgroundImage="url('images1/0"+i+".jpg')";
                div.style.width=200+"px";
                div.style.height=300+"px";
                div.style.backgroundSize="cover";
                div.style.position="absolute";
                div.style.top="0px";
                div.style.left="0px";
                div.angle=0;
                div.οnclick=clickAction;
                //给元素设置拖动事件
                div.οnmοusedοwn=function(e){
                    var x= e.offsetX;
                    var y= e.offsetY;
                    container.onmousemove=function(ef){
                        e.target.style.left= (ef.clientX- x)+"px";
                        e.target.style.top=( ef.clientY-y)+"px";
                    }
                    container.onmouseup=function(ev){
                        this.onmousemove=null;
                        this.onmouseup=null;
                    }
                }



            }
            container.lastElementChild.className="border";

            //2 增加键盘事件
            window.addEventListener("keydown",rotate,true);

        }


        /***
         * 点击图标
         */
        function clickAction(e){

            //0 改变当前选中的图片的优先级
            var div= e.target;
            div.style.zIndex=maxZIndex++;
            //1 清空所有的边框
            clearAllBorder();
            //2 为当前选中的增加边框
            div.className="border";
        }


        //清空所有的边框样式
        function clearAllBorder(){
            var divs=document.getElementsByTagName("span");
            for(var i=0;i<divs.length;i++){
                divs[i].className="";
            }
        }

         /**
         * 键盘按下
         */
        function rotate(e){

            //获取需要旋转的图片
            var div=document.getElementsByClassName("border")[0];
            //获取本身的角度
            var angle=div.angle;

            if(e.keyCode==37){
                //逆时针
                angle-=5;
            }else if(e.keyCode==39){
                //顺时针
                angle+=5;
            }else{
                return;
            }
            div.style.transform="rotate("+angle+"deg)";
            div.angle=angle;
        }




    </script>
</head>
<body>

<div class="container" id="container"></div>


</body>
</html>