原生JS编写的照片墙效果实例演示特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>照片墙一多实例演示</title>

<style type="text/css">

body,div,h2,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Arail;}

.box{width:860px;margin:10px auto;background:#eee;border:1px solid #b8b8b8;overflow:hidden}

.title{height:30px;line-height:30px;font-size:14px;padding:0 15px 0 35px;border-bottom:1px solid #b8b8b8;background:#fafafa url(http://js.alixixi.com/img/mm/ico.gif) 5px 50% no-repeat;}

.title span{float:left;}

.title a{float:right;color:#06f;outline:none;}

.title a:hover{color:red;}

.box ul{float:left;padding:0 15px 15px 0;}

.box li{float:left;width:140px;height:105px;padding:6px;background:#fff;border:1px solid #c3c3c3;display:inline;margin:15px 0 0 15px;list-style:none;}

.box li img{float:left;width:140px;height:105px;}

.box li.hig{padding:5px;border:2px dashed #f30;opacity:0.5;filter:alpha(opacity=50);}

</style>

<script type="text/javascript">

//获取ID

var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};

//获取tagName

var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};

//获取class

var $$$ = function (sClass, oParent) {

 var aClass = [],

 i = 0,

 reClass = new RegExp("(\\s|^)" + sClass + "($|\\s)"),

 aElement = $$("*", oParent);

 for (i = 0; i < aElement.length; i++)reClass.test(aElement[i].className) && aClass.push(aElement[i]);

 return aClass

};

//获取元素位置

function getPos(obj) {

 var iTop = obj.offsetTop;

 var iLeft = obj.offsetLeft;

 while (obj.offsetParent)

 {

  iTop += obj.offsetParent.offsetTop;

  iLeft += obj.offsetParent.offsetLeft;

  obj = obj.offsetParent;

 }

 return {top:iTop, left:iLeft}

};

//创建照片墙对象

var PhotoWall = function () {this.initialize.apply(this, arguments)};

PhotoWall.prototype = {

 initialize: function (obj, aData)

 {

  var oThis = this;

  this.oParent = $(obj);

  this.oUl = $$("ul", this.oParent)[0];

  this.oBtn = $$("a", this.oParent)[0];

  this.zIndex = 1;

  this.aPos = [];

  this.aData = aData;

  this.dom = document.documentElement || document.body;

  this.create();

  this.oBtn.onclick = function () {oThis.randomOrder()}

 },

 create: function ()

 {

  var aFrag = document.createDocumentFragment();

  var i = 0;

  for (i = 0; i < this.aData.length; i++)

  {

   var oLi = document.createElement("li");

   var oImg = document.createElement("img");

   oImg.src = this.aData[i];

   oLi.appendChild(oImg);

   aFrag.appendChild(oLi)

  }

  this.oUl.appendChild(aFrag);

  this.aLi = $$("li", this.oParent);

  this.changeLayout()

 },

 changeLayout: function ()

 {

  var i = 0;

  this.oParent.style.height = this.oParent.offsetHeight - 2 + "px";

  this.aPos.length = 0;

  for (i = 0; i < this.aLi.length; i++) this.aLi[i].style.cssText = "";

  for (i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].index = i;

   this.aLi[i].style.top = getPos(this.aLi[i]).top + "px";

   this.aLi[i].style.left = getPos(this.aLi[i]).left + "px";

   this.aPos.push({left:getPos(this.aLi[i]).left, top:getPos(this.aLi[i]).top})

  }

  for (i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].style.position = "absolute";

   this.aLi[i].style.margin = "0";

   this.drag(this.aLi[i])

  }

 },

 drag: function (obj, handle)

 {

  var oThis = this;

  var handle = handle || obj;

  handle.style.cursor = "move";

  handle.onmousedown = function (event)

  {

   var event = event || window.event;

   var disX = event.clientX - this.offsetLeft;

   var disY = event.clientY - this.offsetTop;

   var oNear = null;

   handle.style.zIndex = oThis.zIndex++;

   document.onmousemove = function (event)

   {

    var event = event || window.event;

    var iL = event.clientX - disX;

    var iT = event.clientY - disY;

    var maxL = Math.max(oThis.dom.clientWidth, oThis.dom.scrollWidth) - handle.offsetWidth;

    var maxT = Math.max(oThis.dom.clientHeight, oThis.dom.scrollHeight) - handle.offsetHeight;

    iL < 0 && (iL = 0);

    iT < 0 && (iT = 0);

    iL > maxL && (iL = maxL);

    iT > maxT && (iT = maxT);

    handle.style.left = iL + "px";

    handle.style.top = iT + "px";

    oNear = oThis.findNearest(obj);

    for (var i = 0; i < oThis.aLi.length; i++) oThis.aLi[i].className = "";

    oNear && (oNear.className = "hig");

    return false

   };

   document.onmouseup = function ()

   {

    document.onmousemove = null;

    document.onmouseup = null;

    if (oNear)

    {

     handle.index = [handle.index, oNear.index];

     oNear.index = handle.index[0];

     handle.index = handle.index[1];

     oNear.style.zIndex = oThis.zIndex++;

     oThis.doMove(handle, oThis.aPos[handle.index]);

     oThis.doMove(oNear, oThis.aPos[oNear.index]);

     oNear.className = "";

    }

    else

    {

     oThis.doMove(handle, oThis.aPos[handle.index])

    }

    handle.releaseCapture && handle.releaseCapture()

   };

   this.setCapture && this.setCapture();

   return false

  };

 },

 doMove: function (obj, iTarget, callback)

 {

  var oThis = this;

  clearInterval(obj.timer);

  obj.timer = setInterval(function ()

  {

   var iCurL = getPos(obj).left;

   var iCurT = getPos(obj).top;

   var iSpeedL = (iTarget.left - iCurL) / 5;

   var iSpeedT = (iTarget.top - iCurT) / 5;

   iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);

   iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);

   if (iCurL == iTarget.left && iCurT == iTarget.top)

   {

    clearInterval(obj.timer);

    callback && callback()

   }

   else

   {

    obj.style.left = iCurL + iSpeedL + "px";

    obj.style.top = iCurT + iSpeedT + "px"

   }

  }, 30)

 },

 findNearest: function (obj)

 {

  var aDistance = [];

  var i = 0;

  for (i = 0; i < this.aLi.length; i++) aDistance[i] = this.aLi[i] == obj ? Number.MAX_VALUE : this.getDistance(obj, this.aLi[i]);

  var minNum = Number.MAX_VALUE;

  var minIndex = -1;

  for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minIndex = i);

  return this.isButt(obj, this.aLi[minIndex]) ? this.aLi[minIndex] : null

 },

 getDistance: function(obj1, obj2)

 {

  var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);

  var b = (obj1.offsetTop + obj1.offsetTop / 2) - (obj2.offsetTop + obj2.offsetTop / 2);

  return Math.sqrt(a * a + b * b)

 },

 isButt: function (obj1, obj2)

 {

  var l1 = obj1.offsetLeft;

  var t1 = obj1.offsetTop;

  var r1 = l1 + obj1.offsetWidth;

  var b1 = t1 + obj1.offsetHeight;

  var l2 = obj2.offsetLeft;

  var t2 = obj2.offsetTop;

  var r2 = l2 + obj2.offsetWidth;

  var b2 = t2 + obj2.offsetHeight;

  return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)

 },

 randomOrder: function ()

 {

  this.aPos.sort(function () {return Math.random() > 0.5 ? 1 : -1});

  for (var i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].index = i;

   this.doMove(this.aLi[i], this.aPos[i])

  }

 }

};

window.onload = function ()

{

 var aBox = $$$("box");

 var aData = [];

 var aExample = [];

 var i = 0;

 //生成图片数据

 for (i = 0; i < 20; i++) aData[aData.length] = "http://js.alixixi.com/img/mm/" + i + ".jpg";

 //循环创建多个实例

 for (i = 0; i < aBox.length; i++)

 {

  var oExample = new PhotoWall(aBox[i], aData);

  aExample.push(oExample)

 }

 this.onresize = function ()

 {

  for (var p in aExample) aExample[p].changeLayout()

 };

 this.onresize()

};

</script>

</head>

<body>

<div class="box">

    <h2 class="title"><span>一堆90后</span><a href="javascript:;" class="order">随机排序</a></h2>

    <ul></ul>

</div>

<div class="box">

    <h2 class="title"><span>一堆90后</span><a href="javascript:;" class="order">随机排序</a></h2>

    <ul></ul>

</div>

</body>

</html>

效果：

原生JS编写的照片墙效果实例演示特效的更多相关文章

关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
原生JS封装简单动画效果
原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
jq与原生js实现收起展开效果
jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

随机推荐

FreeRTOS和Ucos在打开关闭中断的区别
网易云信，发送验证码短信C#版代码
网易云信发送短信代码(C# 版)....需要注意SHA1 String有转换小写!!!! using System; using System.Collections.Generic; using S ...
Selenium自动化测试问题
org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 ...
[.net 面向对象编程基础] (18) 泛型
[.net 面向对象编程基础] (18) 泛型上一节我们说到了两种数据类型数组和集合,数组是指包含同一类型的多个元素,集合是指.net中提供数据存储和检索的专用类. 数组使用前需要先指定大小,并且检 ...
ASP.NET一般处理程序访问Session问题
我们在使用一般处理程序的时候,访问Session会出现如下错误: 解决方案如下: //引用命名空间 using System.Web.SessionState; //继承IRequiresSessio ...
JavaScript思维导图—Window对象
JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/
python 实现web框架simfish
python 实现web框架simfish 本文主要记录本人利用python实现web框架simfish的过程.源码github地址:simfish WSGI HTTP Server wsgi模块提供 ...
[硬件项目] 2、汽车倒车雷达设计——基于专用倒车雷达芯片GM3101的设计方案与采用CX20106A红外线检测芯片方案对比
前言尽管每辆汽车都有后视镜,但不可避免地都存在一个后视镜的盲区,倒车雷达则可一定程度帮助驾驶员扫除视野死角和视线模糊的缺陷,提高驾驶安全性.上一节已经分析清倒车雷达的语音模块(上一节),本节将深入分 ...
ASP.NET中一种超简单的Ajax解决方案
为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...
Mysql跨表更新多表update sql语句总结
Mysql跨表更新一直是大家所关心的话题,本文介绍mysql多表 update在实践中几种不同的写法假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Price:另外一张表是P ...

原生JS编写的照片墙效果实例演示特效

原生JS编写的照片墙效果实例演示特效的更多相关文章

随机推荐

热门专题