核心代码 ：
1.CSS: 16Sucai.css
复制代码代码如下:
html, cuerpo {
Altura: 100%;
margen: 0px;
relleno: 0px;
}
A {esquema: ninguno;}
img {border: 0;}
un img {vertical-align: top;}
un img.last {margin-right: 0; }
.caja {
Ancho: 850px;
Altura: Auto;
desbordamiento: oculto;
Antecedentes: #666;
margen-top: 10px;
margen-derecha: auto;
margen-fondo: 10px;
margen-izquierda: auto;
Top-top: 10px;
Right de relleno: 0;
Botón de relleno: 0;
ROLDE-LEFT: 10px;
}
.Box ul {
margen: 0px;
relleno: 0px;
flotante: izquierda;
Tipo de estilo de lista: Ninguno;
}
.Box Li {
Ancho: 150px;
Altura: 100px;
flotante: izquierda;
cursor: puntero;
Pantalla: en línea;
margen: 0 10px 10px 0;
borde: 5px Solid #333;
}
#bg {
Ancho: 100%;
Altura: 898px;
Posición: Absoluto;
Izquierda: 0px;
arriba: 0px;
Antecedentes: #000;
Filtro: alfa (opacidad: 50);
Opacidad: 0.5;
Pantalla: ninguno;
}
#BG1 {
Ancho: 100%;
Altura: 100%;
Posición: Absoluto;
Izquierda: 0px;
arriba: 0px;
Antecedentes: #000;
Filtro: alfa (opacidad: 50);
Opacidad: 0.5;
Pantalla: ninguno;
}
#abajo {
Ancho: 215px;
Altura: 50px;
Posición: Absoluto;
Izquierda: 50%;
Abajo: 0px;
margen: 0 0 0 -107px;
borde: 1px sólido #232323;
Antecedentes: #444;
relleno: 1px;
índice z: 1;
Pantalla: ninguno;
}
#bottom ul {
Ancho: 100%;
Altura: 100%;
margen: 0px;
relleno: 0px;
Tipo de estilo de lista: Ninguno;
Antecedentes: #000;
}
#bottom li {
fondo: url (../ images/ico.jpg) No-repeat;
flotante: izquierda;
Pantalla: en línea;
margen: 8px 0 0 18px;
cursor: puntero;
}
#bottom li.prev {
Ancho: 30px;
Altura: 33px;
Posición de fondo: 0 0;
}
#bottom li.next {
Ancho: 30px;
Altura: 33px;
Posición de fondo: -35px 0;
}
#bottom li.img {
Ancho: 30px;
Altura: 33px;
Posición de fondo: -106px 0;
}
#bottom li.close {
Ancho: 31px;
Altura: 33px;
Posición de fondo: -70px 0;
}
#marco {
Antecedentes: #fff;
relleno: 3px;
Posición: Absoluto;
índice z: 2;
Pantalla: ninguno;
Filtro: alfa (opacidad: 0);
Opacidad: 0;
Text-Align: Center;
}
#Bottom1 {
Ancho: 215px;
Altura: 50px;
Posición: Absoluto;
Izquierda: 50%;
Abajo: 0px;
margen: 0 0 0 -107px;
borde: 1px sólido #232323;
Antecedentes: #444;
relleno: 1px;
índice z: 1;
Pantalla: ninguno;
}
#Bottom1 Ul {
Ancho: 100%;
Altura: 100%;
margen: 0px;
relleno: 0px;
Tipo de estilo de lista: Ninguno;
Antecedentes: #000;
}
#Bottom1 Li {
fondo: url (../../ images/ico.jpg) no-repeat;
flotante: izquierda;
Pantalla: en línea;
margen: 8px 0 0 18px;
cursor: puntero;
}
#Bottom1 Li.Prev {
Ancho: 30px;
Altura: 33px;
Posición de fondo: 0 0;
}
#Bottom1 Li.Next {
Ancho: 30px;
Altura: 33px;
Posición de fondo: -35px 0;
}
#Bottom1 Li.img {
Ancho: 30px;
Altura: 33px;
Posición de fondo: -106px 0;
}
#Bottom1 Li.Close {
Ancho: 31px;
Altura: 33px;
Posición de fondo: -70px 0;
}
#Frame1 {
Antecedentes: #fff;
relleno: 3px;
Posición: Absoluto;
índice z: 2;
Pantalla: ninguno;
Filtro: alfa (opacidad: 0);
Opacidad: 0;
Text-Align: Center;
}
/
html, cuerpo {
Altura: 100%;
margen: 0px;
tamaño de fuente: 12px;
}
.mydiv {
Color de fondo: #FFCC66;
Antecedentes: URL (../ Images/LoginBG.png) No-Repeat;
borde: 0px sólido #f00;
Overflow-y: Auto;
Overflow-x: auto;
Text-Align: Center;
Línea de altura: 40px;
tamaño de fuente: 12px;
Font-Weight: Bold;
Índice Z: 999;
Ancho: 434px;
Altura: 238px;
Izquierda: 50%;
arriba: 50%;
margen -izquierda: -200px! IMPORTANTE; / *Ff IE7 该值为本身宽的一半 */
margen -top: -80px! IMPORTANTE; /*Ff IE7 该值为本身高的一半*/
margen-top: 0px;
Posición: ¡fijo! IMPORTANTE; /* Ff IE7*/
Posición: Absoluto; /*Ie6*/
_TOP: Expression (eval (documento. CompatMode &&
documento . CompatMode == 'CSS1COMPAT')?
documento. Scrolltop + (documento.
documento. ClientHeight-this. offsetheight)/ 2:/*ie6*/
documento . cuerpo . Scrolltop + (documento. Cuerpo.
ClientHeight - Esto. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.mydiv1 {
Color de fondo: #FFCC66;
borde: 0px sólido #f00;
Text-Align: Center;
Línea de altura: 40px;
tamaño de fuente: 12px;
Font-Weight: Bold;
Overflow-y: Auto;
Overflow-x: auto;
Índice Z: 999;
Ancho: 434px;
Altura: 238px;
Izquierda: 50%;
arriba: 50%;
margen -izquierda: -200px! IMPORTANTE; / *Ff IE7 该值为本身宽的一半 */
margen -top: -80px! IMPORTANTE; /*Ff IE7 该值为本身高的一半*/
margen-top: 0px;
Posición: ¡fijo! IMPORTANTE; /* Ff IE7*/
Posición: Absoluto; /*Ie6*/
_TOP: Expression (eval (documento. CompatMode &&
documento . CompatMode == 'CSS1COMPAT')?
documento. Scrolltop + (documento.
documento. ClientHeight-this. offsetheight)/ 2:/*ie6*/
documento . cuerpo . Scrolltop + (documento. Cuerpo.
ClientHeight - Esto. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.bg, .popiframe {
Color de fondo: #666;
Pantalla: ninguno;
Ancho: 100%;
Altura: 100%;
Izquierda: 0;
arriba: 0; /*Ff IE7*/
Filtro: alfa (opacidad = 50); /*ES DECIR*/
Opacidad: 0.5; /*Ff*/
índice z: 1;
Posición: ¡fijo! IMPORTANTE; /*Ff IE7*/
Posición: Absoluto; /*Ie6*/
_TOP: Expression (eval (documento. CompatMode &&
documento . CompatMode == 'CSS1COMPAT')?
documento. Scrolltop + (documento.
documento. ClientHeight-this. offsetheight)/ 2:/*ie6*/
documento . cuerpo . Scrolltop + (documento. Cuerpo.
ClientHeight - esto. ClientHeight)/ 2);
}
.popiframe {
Filtro: alfa (opacidad = 0); /*ES DECIR*/
Opacidad: 0; /*Ff*/
}
2.js 事件 ：
复制代码代码如下:
<link rel = "stylesheet" type = "text/css" href = "<%= ruta%>/css/16sucai.css"/>
<script type = "text/javaScript">
función aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementById (id);
showpigdyt (obj2);
}
función showInfo (ID)
{
document.getElementById (id) .style.display = "bloque";
}
función Hiddeninfo (ID)
{
document.getElementById (id) .style.display = "ninguno";
}
</script>
<script language = "javaScript">
// 首页点击查看景点热门照片
función showpigdyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById ("Con");
var obg = document.getElementById ("bg");
var obot = document.getElementById ("Bottom");
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 标签 (集合)
// alerta (AIMG);
var i = inow = 0;
para (i = 0; i <ali.length; i ++) {
Ali [i] .index = i;
Ali [i] .Onclick = function () {
con (ofRame.style) {
display = "block", top = this.offsettop + "Px", izquierda = this.OffSetleft + "Px", width = this.OffSetWidth + "Px", Height = this.OffSetHEight + "Px";
}
// alerta (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;
}demás{
iwidth = oimg.width;
}
if (oimg.width <425 || oimg.height == 0) {
iHeight = 425;
}demás{
iHeight = oimg.Height;
}
var ileft = parseInt ((document.documentelement.clientwidth / 2) - (iWidth / 2));
var iTop = parseInt ((document.documentelement.clientheight / 2) - (iHeight / 2) - 50);
con (oimg.style) {
altura = ancho = "100%";
}
startMove (ofRame, {Opacidad: 100, izquierda: ILeft, arriba: ITOP, ancho: iWidth, altura: iHeight});
obg.style.display = "bloque";
obot.style.display = "bloque";
inow = this.index + 1;
};
}
document.OnMousEdown = function () {
devolver falso;
};
aBli [0] .Onclick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
IDENTIFICACIÓN--;
var pathimg = document.getElementById (id) .name;
ofRame.innerhtml = "<img id =/" " + id +"/"onMouseOver = 'upNext (this)' src =/" " + pathimg +"/"width =/" 100%/"height =/" 100 100 % /" />";
};
aBli [1] .Onclick = function () {
ofRame.style.cursor = "Move";
ofRame.onMousEdown = function (e) {
var oevent = e || evento;
var x = oevent.clientx - ofRame.offsetleft;
var y = oevent.clienty - ofRame.offsettop;
document.onmouseMove = function (e) {
var oevent = e || evento;
var l = oevent.clientx - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} demás {
if (l> document.documentelement.clientwidth - ofRame.offsetWidth) {
L = document.documentelement.clientwidth - ofRame.offsetWidth;
}
}
if (t <0) {
T = 0;
} demás {
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;
devolver falso;
};
document.onmouseUp = function () {
document.onmouseUp = null;
document.onmouseMove = null;
};
devolver falso;
};
};
aBli [2] .Onclick = function () {// 箭头向右事件触发
if (id == (ali.length-1)) {
Id = -1;
}
Id ++;
var pathimg = document.getElementById (id) .name;
ofRame.innerhtml = "<img id =/" " + id +"/"onMouseOver = 'upNext (this)' src =/" " + pathimg +"/"width =/" 100%/"height =/" 100 100 % /" />";
};
aBli [3] .Onclick = function () {// 箭头关闭事件触发
// alerta ("32" + inow - 1);
// alerta ("32" + AIMG [inow - 1] .OffSettop);
startMove (ofRame, {Opacidad: 0, izquierda: AIMG [INOW - 1] .OffSetleft, TOP: AIMG [INOW - 1] .OffSettop, Ancho: 150, altura: 100}, function () {
ofRame.style.display = "Ninguno";
obg.style.display = "Ninguno";
obot.style.display = "Ninguno";
ofRame.onMousEdown = null;
ofRame.style.cursor = "Auto";
});
};
}
función upNext (bigImg) {
var obox = document.getElementById ("Con");
// var ali = obox.getElementsBytagName ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签
var id = bigimg.id;
var izquierdID;
var rightid;
if (id == 0) {
LeftId = Ali.length;
Rightid = 1;
} else if (id == (ali.length-1)) {
LeftId = (Ali.length-1);
Rightid = 0;
}demás{
var lefTID = id ++;
var rectín = id--;
}
var LeftPath = document.getElementById (-LeftId) .name;
var rightPath = document.getElementById (rightId) .name;
var izquierdUrl = "<img id =/" " + leftId +"/"onMouseOver = 'UpNext (this)' src =/" " + LeftPath +"/"width =/" 100%/"Height =/" 100% /" />";
var rightUrl = "<img id =/" " + rightid +"/"onMouseOver = 'upNext (this)' src =/" " + rightpath +"/"width =/" 100%/"altura =/" 100% /" />";
Var ancho = bigimg.width;
Var altura = bigiMg.Height;
var imgurl = recturl;
var ofRame = document.getElementById ("Frame");
bigimg.onmouseMove = function () {
if (event.offsetx <width/2) {
bigimg.style.cursor = 'url (imágenes/arr_left.cur), auto';
imgurl = LeftUrl;
}demás{
bigimg.style.cursor = 'url (imágenes/arr_right.cur), auto';
imgurl = recturl;
}
}
bigimg.onmouseUp = function () {
if (event.offsetx <width/2) {
ofRame.innerhtml = LeftUrl;
}demás{
ofRame.innerhtml = recturl;
}
}
}
función startmove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
DOMOVE (OBJ, JSON, ONEND);
}, 30);
}
función getStyle (obj, attr) {
regresar obj. Currentstyle? obj.CurrentStyle [attr]: getComputedStyle (obj, falso) [attr];
}
function domave (obj, json, onend) {
var attr = "";
var bstop = true;
para (attr in json) {
var icur = 0;
if (attr == "opacidad") {
icur = parseInt (parsefloat (getStyle (obj, attr)) * 100);
} demás {
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 == "opacidad") {
obj.style.filter = "alfa (opacidad:" + (icur + ispeed) + ")";
obj.style.opacity = (Icur + ispeed) / 100;
} demás {
obj.style [attr] = icur + ispeed + "px";
}
}
if (bstop) {
ClearInterval (obj.timer);
if (onend) {
onend ();
}
}
}
</javascript>
3. 页面 Div 布局 ：
复制代码代码如下:
<div id = "con">
<TABLE CELLPADDING = "0" CellSpacing = "0"
>
<c: elige>
<c: when test = "$ {vacía image_list}">
<tr style = "altura: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: cuando>
<c: de lo contrario>
<%para (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "imagen" elementos = "$ {image_list}"
begin = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">
<td align = "izquierda">
<ul> <li>
<a onClick = "aa (this.id)" id = "S $ {strs.index}">
<img id = "$ {strs.index}" style = "altura: 116px; ancho: 116px" src = "< %= wholeproperties.image_image_url %>/$ {image.imagePathsmall}" onclick = "showPigdyt (this, $, $ {Image.ImagePathMiddle}) "name =" < %= Wholeproperties.Image_Image_url %>/$ {image.ImagePathMiddle} "/> </a>
</li> </ul>
<ul>
<li style = "Line-Height: 20px">
<input type = "checkbox" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<c: elige>
<c: when test = "$ {fn: longitud (image.imageName)> 6}">
<c: out value = "$ {fn: substring (image.imageName, 0, 6)} ..." />
</c: cuando>
<c: de lo contrario>
<c: out value = "$ {image.imageName}" />
</c: de lo contrario>
</c: elegir>
</li>
<li style = "Line-Hight: 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: de lo contrario>
</c: elegir>
</table>
</div>
<div> </div>
<div> </div>
<div id = "bg"> </div>
<div id = "fondo">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id = "marco"> </div>