javascript制作照片墙及制作过程中出现的问题
更新时间：2016年04月04日 10:54:25 作者：向婷风
这篇文章主要介绍了javascript制作照片墙及制作过程中出现的问题，感兴趣的朋友可以参考一下
本文主要做了一个照片墙，整个制作过程，主要需要解决一下几个问题：
1、如何进行布局转换？
2、如何对图片进行拖拽处理？
3、如何检测图片碰撞问题？进行碰撞检测
4、当多个图片进行碰撞，如何取其中距离对象最小的物体？
5、如何将相互碰撞的两个物体的位置相互交换？涉及到运动的类库
代码如下：
<html>
<head>
<style>
body{background:black;margin: 0;padding: 0;color: white;font-size: 50px;}
p{position: absolute;width:20px;margin-left: 50px;}
#ul1{width: 690px;position: relative;margin: 20px auto;}
#ul1 li{list-style: none;float: left;margin: 10px;width: 200px;height: 150px;z-index: 1;border: 5px solid white;}
#ul1 .active{border: 5px solid yellow;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="move2.js"></script>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oLi=oUl.getElementsByTagName('li');
var sTore=[];
var i;
var iMinZindex=2;
//进行布局转换
for(i=0;i<oLi.length;i++)
{
sTore[i]={left:oLi[i].offsetLeft,top:oLi[i].offsetTop};//用数组存储每个li的左边距和高度
}
for(i=0;i<oLi.length;i++)
{
oLi[i].style.left=sTore[i].left+'px';
oLi[i].style.top=sTore[i].top+'px';
oLi[i].style.position='absolute';
oLi[i].style.margin=0;
oLi[i].index=i;
}
//图片拖拽处理
for(i=0;i<oLi.length;i++)
{
setDrags(oLi[i]);
}
function setDrags(obj)
{
obj.onmousedown=function(ev)
{
//层级问题
obj.style.zIndex=iMinZindex++;
var oEvent=ev||event;
var disx=oEvent.clientX-obj.offsetLeft;
var disy=oEvent.clientY-obj.offsetTop;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
obj.style.left=oEvent.clientX-disx+'px';//注意加px
obj.style.top=oEvent.clientY-disy+'px';
for(i=0;i<oLi.length;i++)
{
oLi[i].className='';
}
var oNear=findNearest(obj);
if(oNear)//如果是最近的那个物体
{
oNear.className='active';
}
};
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
//交换两物体的位置
var oNear=findNearest(obj);
if(oNear)
{
startMove(oNear,sTore[obj.index]);
startMove(obj,sTore[oNear.index]);
//交换索引值
var temp;
temp=obj.index;
obj.index=oNear.index;
oNear.index=temp;
}
else
{
startMove(obj,sTore[obj.index])//回到自己的位置
}
return false;
};
clearInterval(obj.timer);
return false;
};
}
//发生碰撞，使被碰的图片加边框,进行碰撞检测
function IBoundTest(obj1,obj2)
{
var l1=obj1.offsetLeft;
var r1=obj1.offsetLeft+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=obj1.offsetTop+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=obj2.offsetLeft+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=obj2.offsetTop+obj2.offsetHeight;
if(r1<l2||l1>l2||b1<t2||t1>b2)//没有碰撞
{
return false;
}
else
{
return true;
}
}
//得到两个物体之间的距离
function getDis(obj1,obj2)
{
var a=obj1.offsetLeft-obj2.offsetLeft;
var b=obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(a*a+b*b);
}
//发生碰撞，当与多个碰撞时，取其距离最小的图片
function findNearest(obj)
{
var iMin=9999999;
var iMindex=-1;
var i;
for(i=0;i<oLi.length;i++)
{
if(obj==oLi[i]){continue;}
if(IBoundTest(obj,oLi[i]))//如果两个物体碰撞上
{
var dis=getDis(obj,oLi[i]);
if(iMin>dis)
{
iMin=dis;
iMindex=i;
}
}
}
if(iMindex==-1){return null;}
else
{
return oLi[iMindex];//返回最近的那个
}
}
}
</script>
</head>
<body >
<p>照片墙</p>
<ul id="ul1">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
本文我们会讨论如何通过 JavaScript 在运行时操作 CSS，从而动态地更新应用到我们的元素上的式样。本文所用的技术是我们已经看到过的，但在利用 CSS DOM 来进行操作的时候还需要注意几个特殊点。2014-12-12
用javascript连接access数据库的方法...2006-11-11
formatter 提示框浮层内容格式器,支持字符串模板和回调函数两种形式,下面这篇文章主要给大家介绍了关于Echarts图表中formatter的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
JavaScript ES6中const、let与var的对比详解
这篇文章主要给大家介绍了在JavaScript中const、let与var对比的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-06-06
FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下2024-07-07
本文主要介绍了JavaScript数组方法reduce的概述、语法、参数、工作原理等，由浅入深，便于理解。需要的朋友可以看下2016-12-12
这篇文章主要为大家详细介绍了小程序实现左滑删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
error是指程序中的非正常运行状态，在其他编程语言中称为“异常”或“错误”，解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息，这篇文章主要介绍了javascript中的Error对象，需要的朋友可以参考下2019-04-04![[JS]点出统计器](//img.jbzj.com/images/xgimg/bcimg8.png)
[JS]点出统计器...2006-07-07
这篇文章主要为大家详细介绍了javascript实现点击产生随机图形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
![[JS]点出统计器](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论