이 기사에서는 JS에 의해 사진 벽의 기능을 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml"xmlns : html5 = "http://www.w3.org/1999/xhtml">
<헤드>
<meta charset = "utf-8">
<title> JS 사진 벽 </title>
<meta http-equiv = "x-ua 호환"content = "edge">
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1">
<meta name = "keywords"content = "js photo Wall">
<meta name = "description"content = "js photo Wall">
<link href = "css/style.css"rel = "스타일 시트">
<script src = "move.js"> </script>
<스타일>
*{패딩 : 0; 여백 : 0;}
Li {List-Style : None;}
ul {너비 : 660px; 높이 : 510px; 배경 : #CCC; 마진 : 20px Auto;}
li {너비 : 200px; 높이 : 150px; 여백 : 10px; 플로트 : 왼쪽; }
</스타일>
<cript>
/*
var arr = [ 'a', 'b', 'c', 'd', 'e', 'd', 'f'];
var pos = arr.lastIndexof ( 'd');
경고 (pos);
*/
Window.onload = function () {
var ali = document.querySelectorall ( 'li');
var oinput = document.querySelector ( '#btn');
var pos = [];
var len = ali.length;
var izindex = 2;
// 레이아웃 변환
for (var i = 0; i <len; i ++) {
pos.push ([ali [i] .offsetleft, ali [i] .offsettop]);
}
for (var i = 0; i <len; i ++) {
ali [i] .style.left = pos [i] [0]+'px';
ali [i] .style.top = pos [i] [1]+'px';
ali [i] .style.position = '절대';
ali [i] .style.margin = '0px';
}
for (var i = 0; i <len; i ++) {
ali [i] .index = i;
setDrag (ali [i]);
}
oinput.onclick = function () {
var randomarr = [0,1,2,3,4,5,6,7,8];
randomarr.sort (function (num1, num2) {
return math.random () -0.5;
})
for (var i = 0; i <len; i ++) {
// 임의의 위치를 추가하기 위해 추가합니다
startMove (ali [i], {왼쪽 : pos [randomarr [i]] [0], 상단 : pos [randomarr [i]] [1]};
// 색인 수정
ali [i] .index = randomarr [i];
}
}
// 드래그 앤 드래그
함수 setDrag (obj) {
obj.onmousedown = function (ev) {
Izindex ++;
obj.style.zindex = izindex;
var ev = ev || 이벤트;
var disx = ev.clientx -obj.offsetleft;
var disy = ev.clienty -obj.offsettop;
document.onmouseMove = function (ev) {
var ev = ev || 이벤트;
obj.style.left = ev.clientx- disx +'px';
obj.style.top = ev.clienty -disy +'px';
for (var i = 0; i <len; i ++) {
ali [i] .style.border = 'none';
}
var nl = nearli (obj);
if (nl) {
nl.style.border = '2px solid red';
}
}
document.onmouseup = function () {
document.onmouseMove = null;
document.onmouseup = null;
var nl = nearli (obj);
if (nl) {
nl.style.border = '2px solid red';
startMove (obj, {왼쪽 : pos [nl.index] [0], 상단 : pos [nl.index] [1]});
startMove (nl, {왼쪽 : pos [obj.index] [0], 상단 : pos [obj.index] [1]});
var tmp = nl.index;
nl.index = obj.index;
obj.index = tmp;
nl.style.border = '';
}또 다른{
startMove (obj, {왼쪽 : pos [obj.index] [0], 상단 : pos [obj.index] [1]});
}
}
거짓을 반환합니다.
}
}
// 충돌 감지
기능 isdump (obj1, obj2) {
var l1 = obj1.offsetleft;
var r1 = l1+obj1.offsetWidth;
var t1 = obj1.offsetTop;
var b1 = obj1.offsetheight +t1;
var l2 = obj2.offsetleft;
var r2 = l2+obj2.offsetWidth;
var t2 = obj2.offsetTop;
var b2 = obj2.offsetheight +t2;
if (b2 <t1 || l2> r1 || r2 <l1 || t2> b1) {
거짓을 반환합니다.
}또 다른{
진실을 반환하십시오.
}
}
// 가장 가까운 노드를 찾습니다
기능 근교 (obj) {
var index = -1;
var 값 = 9999;
for (var i = 0; i <len; i ++) {
if (isdump (obj, ali [i]) && obj! = ali [i]) {
var c = getdis (obj, ali [i]);
if (c <value) {
값 = C;
색인 = i;
}
}
}
if (index! = -1) {
return ali [index];
}또 다른{
거짓을 반환합니다.
}
}
함수 getDis (obj1, obj2) {
var x = obj1.offsetleft -obj2.offsetleft;
var y = obj1.offsetTop -obj2.offsetTop;
return math.sqrt (math.pow (x, 2)+math.pow (y, 2));
}
}
</스크립트>
</head>
<body>
<button id = "btn"> 클릭 </button>
<ul>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "3l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
<li> <img src = "5l.jpg"> </li>
<li> <img src = "6l.jpg"> </li>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
</ul>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.