ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

九宫格(纯原生)

2019-09-03 14:56:48  阅读:236  来源: 互联网

标签:原生 九宫格 li ulId background 400px 0px 200px


 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>九宫格</title> <style> *{             margin:0;             padding:0;         }         #ulId{             width:600px;             height:600px;             border:1px solid black;             position:relative;             margin:100px auto;             list-style:none;         }         #ulId li{             width:200px;             height:200px;             position:absolute;             border:1px solid black;             box-sizing:border-box;             background:url(img/1.jpg);             background-size:600px 600px;         }         #ulId li:nth-child(1){             left:0px;             top:0px;             background-position:0px 0px;         }         #ulId li:nth-child(2){             left:200px;             top:0px;             background-position:-200px 0px;         }         #ulId li:nth-child(3){             left:400px;             top:0px;             background-position:-400px 0px;         }         #ulId li:nth-child(4){             left:0px;             top:200px;             background-position:0px -200px;         }         #ulId li:nth-child(5){             left:200px;             top:200px;             background-position:-200px -200px;         }         #ulId li:nth-child(6){             left:400px;             top:200px;             background-position:-400px -200px;         }         #ulId li:nth-child(7){             left:0px;             top:400px;             background-position:0px -400px;         }         #ulId li:nth-child(8){             left:200px;             top:400px;             background-position:-200px -400px;         }         #ulId li:nth-child(9){             left:400px;             top:400px;             background-position:-400px -400px;         } </style> </head> <body> <ul id="ulId"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> <script> function $(id){         return document.getElementById(id);     }     var currIndex=-1;//表示当前按下的li的下标     var targetIndex=-1;//表示目标li的下标
        //一、让每个li能够实现拖拽功能         //1.获取所有li         var lis=$("ulId").children;         //2.循环给每个li绑定onmousedown事件         for(var i=0;i<lis.length;i++){             //给每个li设置自定义属性             lis[i].setAttribute("index",i)             lis[i].onmousedown=function(event){                 var evt=event || window.event;                 //3.偏移 记录鼠标按下时距离事件源的位置                 var offsetX=evt.offsetX;                 var offsetY=evt.offsetY;                 currIndex=this.getAttribute("index");                 this.style.zIndex=1;                 //4.给ul添加onmousemove事件,鼠标在ul里面移动                 $("ulId").onmousemove=function(event){                 var evt=event || window.event;                 //5、计算li距离ul的left和top ...的X(Y)针对的是事件的属性,...left(top)针对的是dom元素的属性                 //鼠标距离ul的位置                 var mouseX=evt.pageX-$("ulId").offsetLeft;                 var mouseY=evt.pageY-$("ulId").offsetTop;                 //li距离ul的位置                 var left1=mouseX-offsetX;                 var top1=mouseY-offsetY;                 //给外观赋值                 lis[currIndex].style.left=left1+"px";                 lis[currIndex].style.top=top1+"px";
                //计算目标li的位置                 var colsIndex=parseInt(mouseX/200); //列下标                 var rowsIndex=parseInt(mouseY/200); //行下标                 targetIndex=rowsIndex*3+colsIndex;//目标li的下标                 }             }             //6.给ul添加onmouseup事件             $("ulId").onmouseup=function(){                 $("ulId").onmousemove=null;                 lis[currIndex].style.zIndex=0;                 changeLi(currIndex,targetIndex);                 currIndex=-1;                 targetIndex=-1;             }         }
         function changeLi(sourIndex,tagIndex){         //二、交换两个li         if(sourIndex==-1 || tagIndex==-1){             return;         }         var lis=$("ulId").children;         if(sourIndex!=tagIndex){                          var temp=getStyle(lis[sourIndex],"backgroundPosition");             lis[sourIndex].style.backgroundPosition=getStyle(lis[tagIndex],"backgroundPosition");             lis[tagIndex].style.backgroundPosition=temp;         }                  //三、归位         var colsIndex=sourIndex%3;         var rowsIndex=parseInt(sourIndex/3);         lis[sourIndex].style.left=colsIndex*200+"px";         lis[sourIndex].style.top=rowsIndex*200+"px";     }
//获取dom对象的样式属性 //参数: // dom对象 // 样式属性名
//返回值:样式属性值
function getStyle(domObj,attr) { if(domObj.currentStyle){//如果能够获取到currentStyle return domObj.currentStyle[attr]; }else{ return window.getComputedStyle(domObj)[attr]; } }
</script>

 

 

标签:原生,九宫格,li,ulId,background,400px,0px,200px
来源: https://www.cnblogs.com/manban/p/11452948.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有