介绍 & lt; !DOCTYPE html公众“-//W3C XHTML 1.0//DTD//EN"过渡;“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"/比;
& lt; title>照片墙一多实例演示& lt;/title>
& lt;风格类型=拔谋?css"比;
身体,div, h3, ul,李{保证金:0;填充:0;}
身体{字体:12 px/1.5 Arail;}
.box{宽度:860 px;保证金:10 px汽车;背景:# eee;边界:1 px固体# b8b8b8;溢出:隐藏}
.title{高度:30 px;行高:30 px;字体大小:14 px;填充:0 15 px 35 0 px;边界底部:1 px固体# b8b8b8;背景:# fafafa url (http://js.alixixi.com/img/mm/ico.gif) 5 px 50%不再重演;}
.title跨度{浮动:左;}
.title{浮动:正确的,颜色:# 06 f;轮廓:没有;}
.title答:悬停{颜色:红色;}
.box ul{浮动:左;填充:0 15 0 px 15 px;}
李.box{浮动:左;宽度:140 px;高度:105 px;填充:6 px;背景:# fff;边界:1 px固体# c3c3c3;显示:内联;保证金:15 px 15 0 0 px; list-style:没有;}
李.box img{浮动:左;宽度:140 px;高度:105 px;}
.box li.hig{填充:5 px;边界:2 px冲# + 30;不透明度:0.5;过滤器:α(不透明度=50);}
& lt;/style>
& lt;脚本类型=拔谋?javascript"比;//获取ID
var=美元函数(id){返回typeof id===皊tring",# 63;. getelementbyid (id): id};//获取tagName
var $ $=函数(tagName oParent){返回(oParent | |文档).getElementsByTagName (tagName)};//获取类
var $ $ $=函数(sClass oParent) {
var aClass=[],
我=0,
reClass=new RegExp (“(\ \ | ^)“;+ sClass +“($ | \ \ s)“),
aElement=$ $ (“*“, oParent);
(我=0;我& lt;aElement.length;我+ +)reClass.test (aElement[我].className),,aClass.push (aElement[我]);
返回aClass
};//获取元素位置
函数getPos (obj) {
var iTop=obj.offsetTop;
var iLeft=obj.offsetLeft;
而(obj.offsetParent)
{
iTop +=obj.offsetParent.offsetTop;
iLeft +=obj.offsetParent.offsetLeft;
obj=obj.offsetParent;
}
返回{:iTop,左:iLeft}
};//创建照片墙对象
{this.initialize var PhotoWall=function ()。应用(这个参数)};
PhotoWall。原型={
初始化:函数(obj aData)
{
var oThis=;
这一点。oParent=$ (obj);
这一点。oUl=$ $ (“ul" this.oParent) [0];
这一点。oBtn=$ $ (“a" this.oParent) [0];
这一点。zIndex=1;
这一点。apo=[];
这一点。aData=https://www.yisu.com/zixun/aData;
这一点。dom文档=ocumentElement | | document.body;
this.create ();
this.oBtn。onclick=function () {oThis.randomOrder ()}
},
创建:函数()
{
var aFrag=document.createDocumentFragment ();
var=0;
(我=0;我
今天就跟大家聊聊有关使用原生js实现照片墙效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
看完上述内容,你们对使用原生js实现照片墙效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
