核心代码 ：
1.css ： 16Sucai.css
复制代码代码如下:
html, тело {
высота: 100%;
поля: 0px;
Заполнение: 0px;
}
{upline: none;}
img {border: 0;}
a img {vertical-align: top;}
a img.last {ренайт вправо: 0; }
.коробка {
Ширина: 850px;
Высота: Авто;
переполнение: скрыто;
Фон: #666;
маржинальная версия: 10px;
Право маржи: Авто;
маржинальный бат: 10px;
Полевая левая: Авто;
надоеволок: 10px;
Право накладки: 0;
надоеволос: 0;
Лебь накладки: 10px;
}
.box ul {
поля: 0px;
Заполнение: 0px;
Плавание: осталось;
тип списка: нет;
}
.box li {
Ширина: 150px;
высота: 100px;
Плавание: осталось;
курсор: указатель;
дисплей: inline;
Покрас: 0 10px 10px 0;
Граница: 5px твердое вещество #333;
}
#bg {
Ширина: 100%;
Высота: 898px;
позиция: абсолютно;
слева: 0px;
Верх: 0px;
Фон: #000;
Фильтр: альфа (непрозрачность: 50);
непрозрачность: 0,5;
дисплей: нет;
}
#bg1 {
Ширина: 100%;
высота: 100%;
позиция: абсолютно;
слева: 0px;
Верх: 0px;
Фон: #000;
Фильтр: альфа (непрозрачность: 50);
непрозрачность: 0,5;
дисплей: нет;
}
#нижний {
Ширина: 215px;
Высота: 50px;
позиция: абсолютно;
Слева: 50%;
Внизу: 0px;
Полевая: 0 0 0 -107px;
Граница: 1PX SOLID #232323;
Фон: #444;
Заполнение: 1px;
z-index: 1;
дисплей: нет;
}
#bottom ul {
Ширина: 100%;
высота: 100%;
поля: 0px;
Заполнение: 0px;
тип списка: нет;
Фон: #000;
}
#bottom li {
Фон: URL (../ Images/ico.jpg) без повторного перепонки;
Плавание: осталось;
дисплей: inline;
Покрас: 8px 0 0 18px;
курсор: указатель;
}
#bottom li.prev {
Ширина: 30px;
Высота: 33px;
Справочная позиция: 0 0;
}
#bottom li.next {
Ширина: 30px;
Высота: 33px;
Справочная позиция: -35px 0;
}
#bottom li.img {
Ширина: 30px;
Высота: 33px;
Справочная позиция: -106px 0;
}
#bottom li.close {
Ширина: 31px;
Высота: 33px;
Справочная позиция: -70px 0;
}
#рамка {
Фон: #fff;
Заполнение: 3PX;
позиция: абсолютно;
Z-Index: 2;
дисплей: нет;
Фильтр: альфа (непрозрачность: 0);
непрозрачность: 0;
Текст-альбом: Центр;
}
#Bottom1 {
Ширина: 215px;
Высота: 50px;
позиция: абсолютно;
Слева: 50%;
Внизу: 0px;
Полевая: 0 0 0 -107px;
Граница: 1PX SOLID #232323;
Фон: #444;
Заполнение: 1px;
z-index: 1;
дисплей: нет;
}
#bottom1 ul {
Ширина: 100%;
высота: 100%;
поля: 0px;
Заполнение: 0px;
тип списка: нет;
Фон: #000;
}
#bottom1 li {
Фон: url (../../ Images/ico.jpg) без повторного зарождения;
Плавание: осталось;
дисплей: inline;
Покрас: 8px 0 0 18px;
курсор: указатель;
}
#bottom1 li.prev {
Ширина: 30px;
Высота: 33px;
Справочная позиция: 0 0;
}
#bottom1 li.next {
Ширина: 30px;
Высота: 33px;
Справочная позиция: -35px 0;
}
#bottom1 li.img {
Ширина: 30px;
Высота: 33px;
Справочная позиция: -106px 0;
}
#bottom1 li.close {
Ширина: 31px;
Высота: 33px;
Справочная позиция: -70px 0;
}
#frame1 {
Фон: #fff;
Заполнение: 3PX;
позиция: абсолютно;
Z-Index: 2;
дисплей: нет;
Фильтр: альфа (непрозрачность: 0);
непрозрачность: 0;
Текст-альбом: Центр;
}
/
html, тело {
высота: 100%;
поля: 0px;
размер шрифта: 12px;
}
.mydiv {
фоновый цвет: #ffcc66;
Фон: url (../ Images/loginbg.png) без повторного зарождения;
Граница: 0PX SOLID #F00;
Overflow-y: Auto;
Overflow-X: Auto;
Текст-альбом: Центр;
высота линии: 40px;
размер шрифта: 12px;
шрифт-вес: жирный шрифт;
Z-Index: 999;
Ширина: 434px;
Высота: 238px;
Слева: 50%;
Верх: 50%;
Мяботая маржа: -200px! Важно; / *Ff ie7 该值为本身宽的一半 */
маржинальная версия: -80px! Важно; /*Ff ie7 该值为本身高的一半*/
маржинальная версия: 0px;
позиция: исправлена! Важно; /* Ff ie7*/
позиция: абсолютно; /*IE6*/
_top: Expression (eval (document. CompatMode &&
документ compatmode == 'css1compat')?
документирование. Scrolltop + (документ.
документирование. ClientHeight-это. OffSetheight)/ 2:/*IE6*/
документ тело . Scrolltop + (документ. Body.
ClientHeight - это. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.mydiv1 {
фоновый цвет: #ffcc66;
Граница: 0PX SOLID #F00;
Текст-альбом: Центр;
высота линии: 40px;
размер шрифта: 12px;
шрифт-вес: жирный шрифт;
Overflow-y: Auto;
Overflow-X: Auto;
Z-Index: 999;
Ширина: 434px;
Высота: 238px;
Слева: 50%;
Верх: 50%;
Мяботая маржа: -200px! Важно; / *Ff ie7 该值为本身宽的一半 */
маржинальная версия: -80px! Важно; /*Ff ie7 该值为本身高的一半*/
маржинальная версия: 0px;
позиция: исправлена! Важно; /* Ff ie7*/
позиция: абсолютно; /*IE6*/
_top: Expression (eval (document. CompatMode &&
документ compatmode == 'css1compat')?
документирование. Scrolltop + (документ.
документирование. ClientHeight-это. OffSetheight)/ 2:/*IE6*/
документ тело . Scrolltop + (документ. Body.
ClientHeight - это. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.bg, .popiframe {
фоновый цвет: #666;
дисплей: нет;
Ширина: 100%;
высота: 100%;
слева: 0;
Верх: 0; /*Ff ie7*/
Фильтр: альфа (непрозрачность = 50); /*Т.е.*/
непрозрачность: 0,5; /*Ff*/
z-index: 1;
позиция: исправлена! Важно; /*Ff ie7*/
позиция: абсолютно; /*IE6*/
_top: Expression (eval (document. CompatMode &&
документ compatmode == 'css1compat')?
документирование. Scrolltop + (документ.
документирование. ClientHeight-это. OffSetheight)/ 2:/*IE6*/
документ тело . Scrolltop + (документ. Body.
ClientHeight - это. ClientHeight)/ 2);
}
.popiframe {
Фильтр: альфа (непрозрачность = 0); /*Т.е.*/
непрозрачность: 0; /*Ff*/
}
2.js 事件 ：
复制代码代码如下:
<link rel = "styleSheet" type = "text/css" href = "<%= path%>/css/16sucai.css"/>
<script type = "text/javascript">
функция aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementbyId (id);
ShowPigDyt (OBJ2);
}
Функция Showinfo (id)
{
document.getElementbyId (id) .style.display = "block";
}
функция hiddeninfo (id)
{
document.getElementbyId (id) .style.display = "none";
}
</script>
<script language = "javascript">
// 首页点击查看景点热门照片
функция ShowPigDyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementbyId ("con");
var obg = document.getElementbyId ("bg");
var obot = document.getElementbyId ("внизу");
var abli = obot.getelementsbytagname ("li");
var oframe = document.getElementById ("frame");
// var ali = obox.getElementsbytagname ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签 (集合)
// var aimg = obox.getElementsbytagname ("img");
var aimg = $ ("img [class = 'conn']"); // 获取所有 a 标签里的 img 标签 (集合)
// предупреждение (AIMG);
var i = inow = 0;
for (i = 0; i <ali.length; i ++) {
ali [i] .index = i;
ali [i] .onclick = function () {
с (oframe.style) {
display = "block", top = this.OffSetTop + "px", Left = this.OffSetleft + "px", width = this.OffSetWidth + "px", height = this.OffSetHeight + "px";
}
// предупреждение (srcpath);
oframe.innerhtml = "<img id =/" " + id +"/"onmouseover = 'upnext (this)' src =/" " + (srcpath) +"/"/>";
var oimg = oframe.getElementsbytagname ("img") [0];
var iwidth;
var iheight;
if (oimg.width <600 || oimg.width == 0) {
iwidth = 600;
}еще{
iwidth = oimg.width;
}
if (oimg.width <425 || oimg.height == 0) {
iheight = 425;
}еще{
iheight = oimg.height;
}
var Ileft = parseint ((document.documentelement.clientWidth / 2) - (iwidth / 2));
var itop = parseint ((document.documentelement.clientheight / 2) - (iheight / 2) - 50);
с (oimg.style) {
высота = ширина = "100%";
}
Startmove (offrame, {непрозрачность: 100, слева: ilft, top: itop, width: iwidth, высота: iheight});
obg.style.display = "block";
obot.style.display = "block";
inow = this.index + 1;
};
}
document.onmousedown = function () {
вернуть ложь;
};
abli [0] .onclick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
ИДЕНТИФИКАТОР--;
var patherg = document.getElementById (id) .name;
oframe.innerhtml = "<img id =/" " + id +"/"onmouseover = 'upnext (this)' src =/" " + pathimg +"/"width =/" 100%/"height =/" 100 % /" />";
};
abli [1] .onclick = function () {
oframe.style.cursor = "move";
oframe.onmousedown = function (e) {
var oevent = e || событие;
var x = oevent.clientx - oframe.offsetleft;
var y = oevent.clienty - oframe.offsettop;
document.onmousemove = function (e) {
var oevent = e || событие;
var l = oevent.clientx - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} еще {
if (l> document.documentelement.clientwidth - oframe.offsetwidth) {
L = document.documentelement.clientwidth - oframe.offsetwidth;
}
}
if (t <0) {
T = 0;
} еще {
if (t> document.documentelement.clientHeight - oframe.offsetheight) {
T = document.documentelement.clientHeight - oframe.offsetheight;
}
}
oframe.style.left = l + "px";
oframe.style.top = t + "px";
oframe.style.margin = 0;
вернуть ложь;
};
document.onmouseup = function () {
document.onmouseup = null;
document.onmouseMove = null;
};
вернуть ложь;
};
};
abli [2] .onclick = function () {// 箭头向右事件触发
if (id == (ali.length-1)) {
Id = -1;
}
Id ++;
var patherg = document.getElementById (id) .name;
oframe.innerhtml = "<img id =/" " + id +"/"onmouseover = 'upnext (this)' src =/" " + pathimg +"/"width =/" 100%/"height =/" 100 % /" />";
};
abli [3] .onclick = function () {// 箭头关闭事件触发
// оповещение ("32" + iNow - 1);
// alert ("32" + aimg [inow - 1] .OffSetTop);
Startmove (oframe, {непрозрачность: 0, слева: aimg [inow - 1] .offsetleft, top: aimg [inow - 1] .offsettop, ширина: 150, высота: 100}, function () {) {
oframe.style.display = "none";
obg.style.display = "none";
obot.style.display = "нет";
oframe.onmousedown = null;
oframe.style.cursor = "Auto";
});
};
}
Функция upnext (bigimg) {
var obox = document.getElementbyId ("con");
// var ali = obox.getElementsbytagname ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签
var id = bigimg.id;
var leftid;
var RightId;
if (id == 0) {
Leatsid = ali.length;
правый = 1;
} else if (id == (ali.length-1)) {
Leatsid = (ali.length-1);
правый = 0;
}еще{
var lealsid = id ++;
var rightid = id--;
}
var LeatsPath = document.getElementById (-LeatsId) .name;
var rightPath = document.getElementById (rightId) .name;
var Leathurl = "<IMG ID =/" " + LeatsId +"/"onMouseOver = 'upNext (this)' src =/" " + lewpath +"/"width =/" 100%/"высота =/" 100% /" />";
var righturl = "<id id =/" " + rightid +"/"onmouseover = 'upnext (this)' src =/" " + rightpath +"/"width =/" 100%/"высота =/" 100% /" />";
var width = bigimg.width;
var height = bigimg.height;
var imgurl = righturl;
var oframe = document.getElementById ("frame");
bigimg.onmouseMove = function () {
if (event.offsetx <ширина/2) {
bigimg.style.cursor = 'url (images/arr_left.cur), auto';
Imgurl = Leathurl;
}еще{
bigimg.style.cursor = 'url (image/arr_right.cur), auto';
imgurl = righturl;
}
}
bigimg.onmouseup = function () {
if (event.offsetx <ширина/2) {
oframe.innerhtml = leleturl;
}еще{
oframe.innerhtml = righturl;
}
}
}
функция startMove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
Домов (obj, json, onend);
}, 30);
}
function getStyle (obj, attr) {
вернуть obj.currentStyle? obj.currentStyle [attr]: getComputedStyle (obj, false) [attr];
}
Функция Domove (obj, json, onend) {
var attr = "";
var bStop = true;
для (attr in json) {
var Icur = 0;
if (attr == "непрозрачность") {
icur = parseint (parsefloat (getStyle (obj, attr)) * 100);
} еще {
Icur = parseint (getStyle (obj, attr));
}
var iSpeed = (json [attr] - icur) / 5;
ispeed = ispeed> 0? Math.ceil (ispeed): math.floor (ispeed);
if (json [attr]! = icur) {
bstop = false;
}
if (attr == "непрозрачность") {
obj.style.filter = "alpha (непрозрачность:" + (icur + ispeed) + ")";
obj.style.opacity = (icur + ispeed) / 100;
} еще {
obj.style [attr] = icur + ispeed + "px";
}
}
if (bStop) {
ClearInterval (obj.timer);
if (onend) {
onend ();
}
}
}
</javascript>
3. 页面 div 布局 ：
复制代码代码如下:
<div id = "con">
<таблица cellpadding = "0" cellspacing = "0"
>
<C: Выберите>
<C: Когда test = "$ {пустое image_list}">
<tr Style = "Высота: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: когда>
<C: в противном случае>
<%для (int i = 0; i <3; i ++) {%>
<tr>
<C: foreach var = "image" emits = "$ {image_list}"
begin = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">
<td align = "Left">
<ul> <li>
<a onclick = "aa (this.id)" id = "s $ {strs.index}">
<img id = "$ {strs.index}" style = "height: 116px; width: 116px" src = "< %= wholeproperties.image_image_url %>/$ {image.imagepathsmall}" Onclick = "showpigdyt (это, $ {image.imagepathmiddle}) "name =" < %= wholeproperties.image_image_url %>/$ {image.imagepathmiddle} "/> </a>
</li> </ul>
<ul>
<li style = "line-height: 20px">
<input type = "fackbox" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<C: Выберите>
<C: Когда тест = "$ {fn: длина (image.imageName)> 6}">
<C: out value = "$ {fn: substring (image.imageName, 0, 6)} ..." />
</c: когда>
<C: в противном случае>
<C: out value = "$ {image.imageName}" />
</c: в противном случае>
</c: выберите>
</li>
<li style = "line-height: 20px"> 上传时间 ： <c: out value = "$ {fn: substring (image.uploadtime, 0,9)}"> </c: out> </li>
<li style = "line-height: 20px"> 图片大小 ： $ {image.imagesize} </li>
</ul>
</td>
</c: Foreach>
</tr>
< %} %>
</c: в противном случае>
</c: выберите>
</table>
</div>
<div> </div>
<div> </div>
<div id = "bg"> </div>
<div id = "Bottom">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id = "frame"> </div>