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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
基于Vue生产环境部署详解
Sep 15 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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 header()函数使用说明
2008/07/10 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
php中请求url的五种方法总结
2017/07/13 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
上课随便讲话检讨书
2014/09/12 职场文书
人民调解协议书范本
2014/10/11 职场文书
小学运动会报道稿
2015/07/22 职场文书
总结Python使用过程中的bug
2021/06/18 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
python双向链表实例详解
2022/05/25 Python