javascript制作照片墙及制作过程中出现的问题


Posted in Javascript onApril 04, 2016

本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题:

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 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
js+html获取系统当前时间
Nov 10 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
javascript拖拽效果延伸学习
Apr 04 #Javascript
javascript事件委托的用法及其好处简析
Apr 04 #Javascript
基于javascript制作微博发布栏效果
Apr 04 #Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
js数组Array sort方法使用深入分析
2013/02/21 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python datetime模块的使用示例
2021/02/02 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
成绩单公证书
2014/04/10 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
财务会计实训报告
2014/11/05 职场文书
晚会闭幕词
2015/01/28 职场文书
不同意离婚代理词
2015/05/23 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
深入理解python多线程编程
2021/04/18 Python
浅谈Python基础之列表那些事儿
2021/05/11 Python