没有合适的资源?快使用搜索试试~ 我知道了~
JS 随机照片墙
5星 · 超过95%的资源 需积分: 9 67 下载量 125 浏览量
2011-12-20
20:04:45
上传
评论
收藏 8KB TXT 举报
温馨提示
试读
9页
一些挺酷的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]);
<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()}
},
};
//获取元素位置
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()}
},
剩余8页未读,继续阅读
Only蜡笔小新
- 粉丝: 1
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页