javascript制作照片墙及制作过程中出现的问题_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

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="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
 <li><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy" alt="javascript制作照片墙及制作过程中出现的问题_javascript技巧" ></li>
</ul>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

See all articles