：
1.css ： 16Sucai.css
复制代码代码如下:
html, corps {
hauteur: 100%;
marge: 0px;
rembourrage: 0px;
}
un {contour: aucun;}
IMG {Border: 0;}
un IMG {Vertical-Align: Top;}
un img.last {margin-droite: 0; }
.boîte {
Largeur: 850px;
Hauteur: Auto;
débordement: caché;
Contexte: # 666;
marge: 10px;
marge droite: auto;
marge-fond: 10px;
marge-gauche: auto;
Tableau de rembourrage: 10px;
rembourrage à droite: 0;
Padding-Bottom: 0;
padding-gauche: 10px;
}
.box ul {
marge: 0px;
rembourrage: 0px;
flottant: à gauche;
Type de style liste: aucun;
}
.box li {
Largeur: 150px;
hauteur: 100px;
flottant: à gauche;
curseur: pointeur;
Affichage: en ligne;
marge: 0 10px 10px 0;
Border: 5px solide # 333;
}
#bg {
Largeur: 100%;
hauteur: 898px;
Position: absolue;
gauche: 0px;
En haut: 0px;
Contexte: # 000;
Filtre: Alpha (opacité: 50);
Opacité: 0,5;
Affichage: aucun;
}
# bg1 {
Largeur: 100%;
hauteur: 100%;
Position: absolue;
gauche: 0px;
En haut: 0px;
Contexte: # 000;
Filtre: Alpha (opacité: 50);
Opacité: 0,5;
Affichage: aucun;
}
#bas {
Largeur: 215px;
hauteur: 50px;
Position: absolue;
Gauche: 50%;
En bas: 0px;
marge: 0 0 0 -107px;
Border: 1px solide # 232323;
Contexte: # 444;
rembourrage: 1px;
Z-Index: 1;
Affichage: aucun;
}
#bottom ul {
Largeur: 100%;
hauteur: 100%;
marge: 0px;
rembourrage: 0px;
Type de style liste: aucun;
Contexte: # 000;
}
#bottom li {
Contexte: URL (../ images / ico.jpg) sans répétition;
flottant: à gauche;
Affichage: en ligne;
marge: 8px 0 0 18px;
curseur: pointeur;
}
#bottom li.prev {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: 0 0;
}
#bottom li.next {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: -35px 0;
}
#bottom li.img {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: -106px 0;
}
#bottom li.close {
Largeur: 31px;
hauteur: 33px;
Position d'arrière-plan: -70px 0;
}
#cadre {
Contexte: #FFF;
rembourrage: 3px;
Position: absolue;
Z-Index: 2;
Affichage: aucun;
filtre: alpha (opacité: 0);
Opacité: 0;
Texte-aligne: Centre;
}
# bottom1 {
Largeur: 215px;
hauteur: 50px;
Position: absolue;
Gauche: 50%;
En bas: 0px;
marge: 0 0 0 -107px;
Border: 1px solide # 232323;
Contexte: # 444;
rembourrage: 1px;
Z-Index: 1;
Affichage: aucun;
}
# bottom1 ul {
Largeur: 100%;
hauteur: 100%;
marge: 0px;
rembourrage: 0px;
Type de style liste: aucun;
Contexte: # 000;
}
# bottom1 li {
Contexte: URL (../../ images / ico.jpg) sans répétition;
flottant: à gauche;
Affichage: en ligne;
marge: 8px 0 0 18px;
curseur: pointeur;
}
# bottom1 li.prev {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: 0 0;
}
# bottom1 li.next {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: -35px 0;
}
# bottom1 li.img {
Largeur: 30px;
hauteur: 33px;
Position d'arrière-plan: -106px 0;
}
# bottom1 li.close {
Largeur: 31px;
hauteur: 33px;
Position d'arrière-plan: -70px 0;
}
# frame1 {
Contexte: #FFF;
rembourrage: 3px;
Position: absolue;
Z-Index: 2;
Affichage: aucun;
filtre: alpha (opacité: 0);
Opacité: 0;
Texte-aligne: Centre;
}
/ /
html, corps {
hauteur: 100%;
marge: 0px;
taille de police: 12px;
}
.mydiv {
Color d'arrière-plan: # ffcc66;
Contexte: URL (../ images / loginbg.png) sans répétition;
Border: 0px solide # f00;
débordement-y: auto;
Overflow-X: Auto;
Texte-aligne: Centre;
hauteur de ligne: 40px;
taille de police: 12px;
Police-poids: Bold;
Z-Index: 999;
Largeur: 434px;
hauteur: 238px;
Gauche: 50%;
en haut: 50%;
marge-gauche: -200px! IMPORTANT; / * Ff ie7 该值为本身宽的一半 * /
marge: -80px! IMPORTANT; / * Ff ie7 该值为本身高的一半 * /
marge: 0px;
Position: fixe! IMPORTANT; / * Ff ie7 * /
Position: absolue; / * Ie6 * /
_top: Expression (EVAL (Document. CompatMode &&
document . compatMode == 'CSS1Compat')?
DocumentElement. ScrollTop + (document.
DocumentElement. ClientHeight-This. offSetheight) / 2: / * ie6 * /
document . corps . ScrollTop + (Document. Body.
ClientHeight - ceci. ClientHeight) / 2); / * Ie5 ie5.5 * /
}
.mydiv1 {
Color d'arrière-plan: # ffcc66;
Border: 0px solide # f00;
Texte-aligne: Centre;
hauteur de ligne: 40px;
taille de police: 12px;
Police-poids: Bold;
débordement-y: auto;
Overflow-X: Auto;
Z-Index: 999;
Largeur: 434px;
hauteur: 238px;
Gauche: 50%;
en haut: 50%;
marge-gauche: -200px! IMPORTANT; / * Ff ie7 该值为本身宽的一半 * /
marge: -80px! IMPORTANT; / * Ff ie7 该值为本身高的一半 * /
marge: 0px;
Position: fixe! IMPORTANT; / * Ff ie7 * /
Position: absolue; / * Ie6 * /
_top: Expression (EVAL (Document. CompatMode &&
document . compatMode == 'CSS1Compat')?
DocumentElement. ScrollTop + (document.
DocumentElement. ClientHeight-This. offSetheight) / 2: / * ie6 * /
document . corps . ScrollTop + (Document. Body.
ClientHeight - ceci. ClientHeight) / 2); / * Ie5 ie5.5 * /
}
.bg, .popiframe {
Color d'arrière-plan: # 666;
Affichage: aucun;
Largeur: 100%;
hauteur: 100%;
à gauche: 0;
en haut: 0; / * Ff ie7 * /
filtre: alpha (opacité = 50); / * Ie * /
Opacité: 0,5; / * Ff * /
Z-Index: 1;
Position: fixe! IMPORTANT; / * Ff ie7 * /
Position: absolue; / * Ie6 * /
_top: Expression (EVAL (Document. CompatMode &&
document . compatMode == 'CSS1Compat')?
DocumentElement. ScrollTop + (document.
DocumentElement. ClientHeight-This. offSetheight) / 2: / * ie6 * /
document . corps . ScrollTop + (Document. Body.
ClientHeight - ceci. ClientHeight) / 2);
}
.Popiframe {
filtre: alpha (opacité = 0); / * Ie * /
Opacité: 0; / * Ff * /
}
2.JS 事件 ：
复制代码代码如下:
<link rel = "stylesheet" type = "text / css" href = "<% = path%> / css / 16sucai.css" />
<script type = "text / javascript">
fonction aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementById (id);
showpigdyt (obj2);
}
fonction showInfo (id)
{
document.getElementById (id) .style.display = "Block";
}
fonction HiddenInfo (id)
{
document.getElementById (id) .style.display = "Aucun";
}
</cript>
<script linguisse = "javascript">
// 首页点击查看景点热门照片
fonction showpigdyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById ("con");
var obg = document.getElementById ("bg");
var obot = document.getElementById ("inférieur");
var abli = obot.getElementsByTAGName ("li");
var oframe = document.getElementById ("cadre");
// var ali = obox.getElementsByTagName ("li");
var ali = $ ("li [classe = 'conn']"); // 获取所有 a 标签的 li 标签 (集合)
// var AIMG = obox.getElementsByTagName ("img");
var AIMG = $ ("IMG [CLASS = 'Conn']"); // 获取所有 A 标签里的 IMG 标签 (集合)
// alerte (AIMG);
var i = inow = 0;
pour (i = 0; i <ali.length; i ++) {
Ali [i] .Index = i;
ali [i] .onclick = function () {
avec (oframe.style) {
display = "block", top = this.offsettop + "px", left = this.offsetleft + "px", width = this.offsetwidth + "px", height = this.offsetheight + "px";
}
// alerte (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;
}autre{
iWidth = oiMg.Width;
}
if (oimg.width <425 || oimg.height == 0) {
Iheight = 425;
}autre{
iheight = oimg.height;
}
var ileft = parseInt ((document.DocumentElement.ClientWidth / 2) - (iWidth / 2));
var itop = parseInt ((document.DocumentElement.ClientHeight / 2) - (iheight / 2) - 50);
avec (oimg.style) {
hauteur = largeur = "100%";
}
startMove (OFRAME, {Opacité: 100, gauche: ileft, top: itop, largeur: iwidth, hauteur: iheight});
obg.style.display = "bloc";
obot.style.display = "bloc";
inow = this.index + 1;
};
}
document.onmousedown = function () {
retourne false;
};
Abli [0] .OnClick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
IDENTIFIANT--;
var pathimg = document.getElementById (id) .name;
oframe.innerhtml = "<img id = /" "+ id +" / "onMouseOver = 'upNext (this)' src = /" "+ pathimg +" / "width = /" 100% / "height = /" 100 % / "/>";
};
Abli [1] .OnClick = fonction () {
OFRAME.STYLE.CURSOR = "MOVE";
OFRAME.ONMOUSEDOWN = FUCTION (E) {
var oevent = e || événement;
var x = oevent.clientx - OFRAME.OffSetLeft;
var y = oevent.clienty - OFRAME.OFFSETTOP;
document.onmousemove = fonction (e) {
var oevent = e || événement;
var l = oevent.clientx - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} autre {
if (l> document.DocumentElement.ClientWidth - OFRAME.OffsetWidth) {
L = document.DocumentElement.ClientWidth - OFRAME.OffSetWidth;
}
}
if (t <0) {
T = 0;
} autre {
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;
retourne false;
};
document.onmouseup = function () {
document.onmouseUp = null;
document.onMouseMove = null;
};
retourne false;
};
};
Abli [2] .OnClick = fonction () {// 箭头向右事件触发
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 % / "/>";
};
Abli [3] .OnClick = function () {// 箭头关闭事件触发
// alerte ("32" + inow - 1);
// alert ("32" + AIMG [inow - 1] .offsetTop);
StartMove (OFRAME, {Opacité: 0, gauche: AIMG [inow - 1] .offsetleft, top: AIMG [inow - 1] .offsetTop, largeur: 150, hauteur: 100}, fonction () {{
OFRAME.STYLE.DISPlay = "Aucun";
obg.style.display = "Aucun";
obot.style.display = "Aucun";
OFRAME.ONMOUSEDOWN = NULL;
OFRAME.STYLE.CURSOR = "AUTO";
});
};
}
fonction upNext (bigImg) {
var obox = document.getElementById ("con");
// var ali = obox.getElementsByTagName ("li");
var ali = $ ("li [classe = 'conn']"); // 获取所有 a 标签的 li 标签
var id = bigImg.id;
var lefTID;
var droite;
if (id == 0) {
Leftid = ali.length;
droite = 1;
} else if (id == (ali.length-1)) {
LefTID = (Ali.Length-1);
droite = 0;
}autre{
var gauche = id ++;
var droite = id--;
}
var LeftPath = document.getElementById (- Leftid) .name;
var rightpath = document.getElementById (droite) .name;
var lefUrl = "<img id = /" "+ gauche +" / "onMouseOver = 'upNext (this)' src = /" "+ LeftPath +" / "width = /" 100% / "height = /" 100% / "/>";
var droite = "<img id = /" "+ droite +" / "onMouseOver = 'upNext (this)' src = /" "+ droite +" / "width = /" 100% / "height = /" 100% / "/>";
var largeur = bigImg.Width;
var hauteur = bigimg.height;
var imgurl = rightUrl;
var oframe = document.getElementById ("cadre");
bigimg.onmousemove = function () {
if (event.offsetx <width / 2) {
bigimg.style.cursor = 'url (images / arr_left.cur), auto';
imgurl = lefTUrl;
}autre{
bigimg.style.cursor = 'url (images / arr_right.cur), auto';
imgurl = rightUrl;
}
}
bigimg.onmouseup = function () {
if (event.offsetx <width / 2) {
OFRAME.InnerHtml = LeftUrl;
}autre{
OFRAME.InnerHtml = RightUrl;
}
}
}
fonction startmove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
Domove (Obj, Json, Onend);
}, 30);
}
function getStyle (obj, att) {
retour obj.currentStyle? obj.currentStyle [att]: getCompuledStyle (obj, false) [att];
}
fonction Domove (obj, json, onend) {
var attr = "";
var bstop = true;
pour (attr in json) {
var icur = 0;
if (att == "opacité") {
icur = paSeInt (parsefloat (getStyle (obj, att)) * 100);
} autre {
icur = paSeInt (getSTyle (obj, att));
}
var ispeed = (json [att] - icur) / 5;
ISPEED = ISPEED> 0? Math.ceil (ispeed): math.floor (ispeed);
if (json [att]! = icur) {
bstop = false;
}
if (att == "opacité") {
obj.style.filter = "alpha (opacité:" + (icur + ispeed) + ")";
obj.style.opacity = (icur + ispeed) / 100;
} autre {
obj.style [att] = icur + ispeed + "px";
}
}
if (bstop) {
ClearInterval (obj.timer);
if (onend) {
onend ();
}
}
}
</ javascript>
3. 页面 Div 布局 ：
复制代码代码如下:
<div id = "con">
<table cellpadding = "0" CellSpacing = "0"
>
<C: Choisissez>
<c: quand test = "$ {vide image_list}">
<tr style = "hauteur: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</ C: Quand>
<c: sinon>
<% pour (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "image" items = "$ {image_list}"
begin = "<% = i * 5%>" end = "<% = (i + 1) * 5 - 1%>" varsatus = "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 (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: Choisissez>
<c: quand test = "$ {fn: longueur (image.imagename)> 6}">
<c: out value = "$ {fn: substring (image.imagename, 0, 6)} ..." />
</ C: Quand>
<c: sinon>
<c: out valeur = "$ {image.imagename}" />
</c: sinon>
</c: choisissez>
</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: sinon>
</c: choisissez>
</ table>
</div>
<div> </div>
<div> </div>
<div id = "bg"> </div>
<div id = "inférieur">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id = "frame"> </ div>