บทความนี้อธิบายถึงวิธีการใช้งานฟังก์ชั่นของกำแพงภาพถ่ายโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml" >>
<head>
<meta charset = "utf-8">
<title> JS Photo Wall </title>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "edge">
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1">
<meta name = "คำหลัก" content = "JS Photo Wall">
<meta name = "คำอธิบาย" content = "JS Photo Wall">
<link href = "css/style.css" rel = "stylesheet">
<script src = "move.js"> </script>
<style>
*{padding: 0; มาร์จิ้น: 0;}
li {list-style: none;}
ul {width: 660px; ความสูง: 510px; ความเป็นมา: #CCC; มาร์จิ้น: 20px auto;}
li {width: 200px; ความสูง: 150px; มาร์จิ้น: 10px; ลอย: ซ้าย; -
</style>
<script>
-
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;
// การแปลงเลย์เอาต์
สำหรับ (var i = 0; i <len; i ++) {
pos.push ([Ali [i] .offsetleft, Ali [i] .offSettop]);
-
สำหรับ (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 = 'Absolute';
Ali [i] .style.margin = '0px';
-
สำหรับ (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,6,7,8];
RandomAr.sort (ฟังก์ชั่น (num1, num2) {
Return Math.random ()-0.5;
-
สำหรับ (var i = 0; i <len; i ++) {
// เพิ่มเพื่อเพิ่มตำแหน่งสุ่ม
startmove (Ali [i], {ซ้าย: pos [randomarr [i]] [0], top: pos [randomarr [i]] [1]});
// การแก้ไขดัชนี
Ali [i] .index = RandomAr [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';
สำหรับ (var i = 0; i <len; i ++) {
Ali [i] .style.border = 'ไม่มี';
-
var nl = nearli (obj);
ถ้า (NL) {
nl.style.border = '2px solid red';
-
-
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
var nl = nearli (obj);
ถ้า (NL) {
nl.style.border = '2px solid red';
startmove (obj, {ซ้าย: pos [nl.index] [0], top: 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], top: 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 = -1;
ค่า var = 9999;
สำหรับ (var i = 0; i <len; i ++) {
ถ้า (isdump (obj, Ali [i]) && obj! = Ali [i]) {
var c = getdis (obj, ali [i]);
ถ้า (C <ค่า) {
ค่า = c;
ดัชนี = i;
-
-
-
ถ้า (ดัชนี! =-1) {
ส่งคืนอาลี [ดัชนี];
}อื่น{
กลับเท็จ;
-
-
ฟังก์ชั่น 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));
-
-
</script>
</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 ของทุกคน