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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
Android照片墙应用实现 再多的图片也不怕崩溃
照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作"墙",然后随着GridView的滚动将一张张照片贴在"墙"上,这些照片可以是手机本地中存储的,也可以是从网上下载的.制作类似于这种的功能的应用,有一个非常重要的问题需要考虑,就是图片资源何时应该释放.因为随着GridView的滚动,加载的图片可能会越来越多,如果没有一种合理的机制对图片进行释放,那么当图片达到一定上限时,程序就必然
-
js实现超酷的照片墙展示效果图附源码下载
这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
-
js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
-
javascript实现了照片拖拽点击置顶的照片墙代码
演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
-
基于jQuery实现照片墙自动播放特效
一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1
-
Android瀑布流照片墙实现 体验不规则排列的美感
传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大小参差不齐,
-
javascript制作照片墙及制作过程中出现的问题
本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库 代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
-
Docker制作镜像的完整过程
目录 前言 创建步骤 创建CentOS基础镜像 创建容器并自定义 以自定义容器创建新镜像 保存.加载镜像tar包 将镜像推送到远程仓库 参考链接 前言 以制作CentOS镜像为例,讲述对镜像自定义,打包以及推送的远程仓库的过程,步骤都比较简单可以快速上手. 创建步骤 创建CentOS基础镜像 创建构建目录和Dockerfile,在Dockerfile中编辑镜像相关设置. echo "在当前用户目录下创建创建目录docker/build/centos_7.8.2003" > /de
-
JavaScript运行过程中的“预编译阶段”和“执行阶段”
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的"预编译阶段"(javascript的预编译是以代码块为范围<script></script>,即每遇到一个代码块都会进行 预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结 首先科普下javascript中的两种声明方式,var和function,前者声明的是变量,后
-
python编程使用PyQt制作预览窗口游戏中的小地图
目录 写作思路 1.简述实现原理 2.部分代码解析 ①方框的完整代码 ②编辑界面 ③预览窗口 3.位置同步解析 ①上下两屏位置同步.编辑屏位置保持不变 写作思路 1.简述实现原理 2.部分代码解析 3.位置同步解析(①上下两屏位置同步②编辑屏位置保持不变) 效果图如下: 版本1: 这就是我们常见的预览窗口,上面预览窗口移动/缩放小方框都会导致下面的编辑界面位置发生变化,同理,下面的编辑界面的移动/缩放也会导致上面的小方框变化,并且上面预览图是编辑窗口的同比例缩放 版本2: 在版本1的基础上,加入
-
JavaScript实现省市联动过程中bug的解决方法
本文为大家分享了JavaScript实现省市联动过程中bug的解决方法,供大家参考,具体内容如下 先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : fun
-
浅谈webpack打包过程中因为图片的路径导致的问题
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打
-
win10上安装ubunt18双系统过程中出现mmx64.efi not found问题
安装Ubuntu18过程中,从u盘启动ubunt安装,出现mmx64.efi not found问题 如下图: 制作好ubunt启动盘之后在EFI/BOOT下会看到两个文件,将其中grubx64.efi改名为mmx64.efi即可重装系统. 总结 以上所述是小编给大家介绍的win10上安装ubunt18双系统过程中出现mmx64.efi not found问题,希望对大家有所帮助!
-
Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题
需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q
-
Ajax在请求过程中显示进度的简单实现
Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示"Loading"状态,同时当前页面被"罩住"防止用户继续点击L
-
调试Javascript代码(浏览器F12及VS中debugger关键字)
目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我