تصف هذه المقالة طريقة تنفيذ وظيفة جدار الصورة بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <! doctype html>
<html xmlns = "http://www.w3
<head>
<meta charset = "utf-8">
<title> JS Photo Wall </title>
<meta http-equiv = "x-ua compatible" content = "edge">
<meta name = "viewport" content = "width = width device ، scale inial = 1">
<meta name = "Keywords" content = "JS Photo Wall">
<meta name = "description" content = "JS Photo Wall">
<link href = "css/style.css" rel = "STYLESHEET">
<script src = "move.js"> </script>
<style>
*{padding: 0 ؛ الهامش: 0 ؛}
li {على غرار القائمة: لا شيء ؛}
ul {width: 660px ؛ الارتفاع: 510px ؛ الخلفية: #ccc ؛ الهامش: 20px Auto ؛}
li {width: 200px ؛ الارتفاع: 150 بكسل ؛ الهامش: 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' ؛
علي [i]
علي [i] .style.margin = '0px' ؛
}
لـ (var i = 0 ؛ i <len ؛ i ++) {
علي [i] .index = i ؛
setDrag (علي [i]) ؛
}
oinput.onclick = function () {
var randomarr = [0،1،2،3،4،5،6،7،8] ؛
randomarr.sort (وظيفة (num1 ، num2) {
إرجاع Math.Random ()-0.5 ؛
})
لـ (var i = 0 ؛ i <len ؛ i ++) {
// أضف لإضافة مواضع عشوائية
StarTmove (ali [i] ، {left: pos [randomarr [i]] [0] ، top: pos [randomarr [i]] [1]}) ؛
// تصحيح الفهرس
علي [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' ؛
لـ (var i = 0 ؛ i <len ؛ i ++) {
علي [i] .style.border = 'none' ؛
}
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 ، {left: pos [nl.index] [0] ، top: pos [nl.index] [1]}) ؛
StarTmove (nl ، {left: pos [obj.index] [0] ، top: pos [obj.index] [1]}) ؛
var tmp = nl.index ؛
nl.index = obj.index ؛
obj.index = tmp ؛
nl.style.border = '' ؛
}آخر{
StarTmove (obj ، {left: 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 index = -1 ؛
var value = 9999 ؛
لـ (var i = 0 ؛ i <len ؛ i ++) {
if (iSdump (obj ، ali [i]) && obj! = ali [i]) {
var c = getDis (obj ، ali [i]) ؛
if (c <value) {
القيمة = ج ؛
الفهرس = i ؛
}
}
}
إذا (الفهرس! =-1) {
إرجاع علي [الفهرس] ؛
}آخر{
العودة كاذبة
}
}
وظيفة getDis (OBJ1 ، OBJ2) {
var x = obj1.OffSetLeft - OBJ2.OffSetLeft ؛
var y = obj1.offsettop - obj2.offsettop ؛
إرجاع 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 للجميع.