js實(shí)現(xiàn)照片墻功能實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)照片墻功能的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>js照片墻</title>
<meta http-equiv="X-UA-Compatible" content="edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="js照片墻">
<meta name="description" content="js照片墻">
<link href="css/style.css" rel="stylesheet">
<script src="move.js"></script>
<style>
*{padding: 0; margin: 0;}
li{list-style: none;}
ul{width: 660px; height:510px; background:#ccc;margin: 20px auto;}
li{width:200px; height: 150px; margin: 10px; float: left; }
</style>
<script>
/*
var arr=['a','b','c','d','e','d','f'];
var pos = arr.lastIndexOf('d');
alert(pos);
*/
window.onload=function(){
var aLi = document.querySelectorAll('li');
var oInput = document.querySelector('#btn');
var pos = [];
var len= aLi.length;
var izIndex= 2;
//布局轉(zhuǎn)換
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 = 'absolute';
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++){
//增加隨機(jī)位置的情況
startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
//修正索引
aLi[i].index = randomArr[i];
}
}
//拖拽
function setDrag(obj){
obj.onmousedown =function(ev){
izIndex++;
obj.style.zIndex= izIndex;
var ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove=function(ev){
var ev = ev || event;
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,{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='';
}else{
startMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
}
}
return false;
}
}
//檢測是否有碰撞
function 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){
return false;
}else{
return true;
}
}
//尋找最近的節(jié)點(diǎn)
function nearLi(obj){
var index= -1;
var value =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){
value = c;
index = i;
}
}
}
if(index !=-1){
return aLi[index];
}else{
return false;
}
}
function 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">click</button>
<ul>
<li><img src="1l.jpg" width="200px" height="150px"></li>
<li><img src="2l.jpg" width="200px" height="150px"></li>
<li><img src="3l.jpg" width="200px" height="150px"></li>
<li><img src="4l.jpg" width="200px" height="150px"></li>
<li><img src="5l.jpg" width="200px" height="150px"></li>
<li><img src="6l.jpg" width="200px" height="150px"></li>
<li><img src="1l.jpg" width="200px" height="150px"></li>
<li><img src="2l.jpg" width="200px" height="150px"></li>
<li><img src="4l.jpg" width="200px" height="150px"></li>
</ul>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了package.json中homepage屬性的作用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了JavaScript事件委托原理與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript事件流以及事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下2018-06-06
JS實(shí)現(xiàn)帶鼠標(biāo)效果的頭像及文章列表代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶鼠標(biāo)效果的頭像及文章列表代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)切換頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)折線圖的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
electron獲取位置坐標(biāo)信息的方法小結(jié)
這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
javascript通過元素id和name直接取得元素的方法
這篇文章主要介紹了javascript通過元素id和name直接取得元素的方法,涉及javascript獲取元素的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
本文主要介紹了js仿淘寶評(píng)價(jià)評(píng)分功能——點(diǎn)擊心形生成得分（有半心選擇），具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄獪\談js中同名函數(shù)和同名變量的執(zhí)行問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家分享了B/S(Web)實(shí)時(shí)通訊的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章介紹了JS檢測圖片大小的實(shí)例，有需要的朋友可以參考一下2013-08-08