核心代码
1.CSS: 16SUCAI.CSS
复制代码代码如下:
html, corpo {
Altura: 100%;
margem: 0px;
preenchimento: 0px;
}
a {esboço: nenhum;}
img {borda: 0;}
A img {vertical-align: top;}
A img.Last {margem-direita: 0; }
.caixa {
Largura: 850px;
Altura: Auto;
estouro: oculto;
Antecedentes: #666;
Margin-top: 10px;
Margem-direita: Auto;
Margin-Bottom: 10px;
margem-esquerda: automático;
Top-top: 10px;
Right-right: 0;
Botting-Bottom: 0;
preenchimento-esquerda: 10px;
}
.Box Ul {
margem: 0px;
preenchimento: 0px;
flutuar: esquerda;
Tipo no estilo de lista: nenhum;
}
.Box Li {
Largura: 150px;
Altura: 100px;
flutuar: esquerda;
Cursor: Ponteiro;
exibição: embutido;
margem: 0 10px 10px 0;
borda: 5px Solid #333;
}
#bg {
largura: 100%;
Altura: 898px;
Posição: Absoluto;
Esquerda: 0px;
Top: 0px;
Antecedentes: #000;
filtro: alfa (opacidade: 50);
Opacidade: 0,5;
Exibir: Nenhum;
}
#BG1 {
largura: 100%;
Altura: 100%;
Posição: Absoluto;
Esquerda: 0px;
Top: 0px;
Antecedentes: #000;
filtro: alfa (opacidade: 50);
Opacidade: 0,5;
Exibir: Nenhum;
}
#fundo {
Largura: 215px;
Altura: 50px;
Posição: Absoluto;
Esquerda: 50%;
Inferior: 0px;
margem: 0 0 0 -107px;
borda: 1px Solid #232323;
Antecedentes: #444;
preenchimento: 1px;
Z-Index: 1;
Exibir: Nenhum;
}
#bottom ul {
largura: 100%;
Altura: 100%;
margem: 0px;
preenchimento: 0px;
Tipo no estilo de lista: nenhum;
Antecedentes: #000;
}
#bottom li {
Antecedentes: URL (../ imagens/ico.jpg) sem repetição;
flutuar: esquerda;
exibição: embutido;
margem: 8px 0 0 18px;
Cursor: Ponteiro;
}
#bottom li.prev {
Largura: 30px;
Altura: 33px;
Posição de fundo: 0 0;
}
#bottom li.next {
Largura: 30px;
Altura: 33px;
Posição de fundo: -35px 0;
}
#bottom li.img {
Largura: 30px;
Altura: 33px;
Posição de fundo: -106px 0;
}
#bottom li.close {
Largura: 31px;
Altura: 33px;
Posição de fundo: -70px 0;
}
#quadro {
Antecedentes: #FFF;
preenchimento: 3px;
Posição: Absoluto;
Z-Index: 2;
Exibir: Nenhum;
filtro: alfa (opacidade: 0);
opacidade: 0;
Alinhamento de texto: centro;
}
#Bottom1 {
Largura: 215px;
Altura: 50px;
Posição: Absoluto;
Esquerda: 50%;
Inferior: 0px;
margem: 0 0 0 -107px;
borda: 1px Solid #232323;
Antecedentes: #444;
preenchimento: 1px;
Z-Index: 1;
Exibir: Nenhum;
}
#Bottom1 ul {
largura: 100%;
Altura: 100%;
margem: 0px;
preenchimento: 0px;
Tipo no estilo de lista: nenhum;
Antecedentes: #000;
}
#Bottom1 li {
Antecedentes: URL (../../ imagens/ico.jpg) sem repetição;
flutuar: esquerda;
exibição: embutido;
margem: 8px 0 0 18px;
Cursor: Ponteiro;
}
#Bottom1 li.prev {
Largura: 30px;
Altura: 33px;
Posição de fundo: 0 0;
}
#Bottom1 li.next {
Largura: 30px;
Altura: 33px;
Posição de fundo: -35px 0;
}
#Bottom1 li.img {
Largura: 30px;
Altura: 33px;
Posição de fundo: -106px 0;
}
#Bottom1 li.close {
Largura: 31px;
Altura: 33px;
Posição de fundo: -70px 0;
}
#frame1 {
Antecedentes: #FFF;
preenchimento: 3px;
Posição: Absoluto;
Z-Index: 2;
Exibir: Nenhum;
filtro: alfa (opacidade: 0);
opacidade: 0;
Alinhamento de texto: centro;
}
/
html, corpo {
Altura: 100%;
margem: 0px;
tamanho de fonte: 12px;
}
.mydiv {
Background-Color: #ffcc66;
Antecedentes: URL (../ Images/Loginbg.png) No-REPEAT;
borda: 0px sólido #f00;
transbordamento-y: automático;
Overflow-X: Auto;
Alinhamento de texto: centro;
altura da linha: 40px;
tamanho de fonte: 12px;
Peso da fonte: negrito;
Z-Index: 999;
Largura: 434px;
Altura: 238px;
Esquerda: 50%;
TOP: 50%;
margem -esquerda: -200px! IMPORTANTE; / *Ff ie7 该值为本身宽的一半 */
Margin -top: -80px! IMPORTANTE; /*Ff ie7 该值为本身高的一半*/
Margin-top: 0px;
Posição: corrigido! IMPORTANTE; /* Ff ie7*/
Posição: Absoluto; /*Ie6*/
_top: expressão (avaliação (document. Compatmode &&
documento. compatmode == 'css1compat')?
DocumentElement. scrolltop + (documento.
DocumentElement. ClientHeight-isso. OffsetHeight)/ 2:/*ie6*/
documento. corpo . scrolltop + (documento. corpo.
ClientHeight - isso. clientHeight)/ 2); /*Ie5 ie5.5*/
}
.mydiv1 {
Background-Color: #ffcc66;
borda: 0px sólido #f00;
Alinhamento de texto: centro;
altura da linha: 40px;
tamanho de fonte: 12px;
Peso da fonte: negrito;
transbordamento-y: automático;
Overflow-X: Auto;
Z-Index: 999;
Largura: 434px;
Altura: 238px;
Esquerda: 50%;
TOP: 50%;
margem -esquerda: -200px! IMPORTANTE; / *Ff ie7 该值为本身宽的一半 */
Margin -top: -80px! IMPORTANTE; /*Ff ie7 该值为本身高的一半*/
Margin-top: 0px;
Posição: corrigido! IMPORTANTE; /* Ff ie7*/
Posição: Absoluto; /*Ie6*/
_top: expressão (avaliação (document. Compatmode &&
documento. compatmode == 'css1compat')?
DocumentElement. scrolltop + (documento.
DocumentElement. ClientHeight-isso. OffsetHeight)/ 2:/*ie6*/
documento. corpo . scrolltop + (documento. corpo.
ClientHeight - isso. clientHeight)/ 2); /*Ie5 ie5.5*/
}
.bg, .popiframe {
Background-Color: #666;
Exibir: Nenhum;
largura: 100%;
Altura: 100%;
Esquerda: 0;
topo: 0; /*Ff ie7*/
filtro: alfa (opacidade = 50); /*Ie*/
Opacidade: 0,5; /*Ff*/
Z-Index: 1;
Posição: corrigido! IMPORTANTE; /*Ff ie7*/
Posição: Absoluto; /*Ie6*/
_top: expressão (avaliação (document. Compatmode &&
documento. compatmode == 'css1compat')?
DocumentElement. scrolltop + (documento.
DocumentElement. ClientHeight-isso. OffsetHeight)/ 2:/*ie6*/
documento. corpo . scrolltop + (documento. corpo.
ClientHeight - isso. clientHeight)/ 2);
}
.popiframe {
filtro: alfa (opacidade = 0); /*Ie*/
opacidade: 0; /*Ff*/
}
2.js 事件:
复制代码代码如下:
<link rel = "Stylesheet" type = "text/css" href = "<%= caminho%>/css/16sucai.css"/>
<script type = "text/javascript">
função aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementById (id);
showpigdyt (obj2);
}
Função ShowInfo (ID)
{
document.getElementById (id) .style.display = "bloqueio";
}
função hiddenfo (id)
{
document.getElementById (id) .style.display = "nenhum";
}
</script>
<Script Language = "JavaScript">
// 首页点击查看景点热门照片
função 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 ("quadro");
// 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;
for (i = 0; i <ali.length; i ++) {
Ali [i] .Index = i;
Ali [i] .OnClick = function () {
com (ofRame.style) {
display = "bloco", top = this.offsettop + "px", esquerda = this.offsetLeft + "px", width = this.offsetWidth + "px", altura = 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;
}outro{
iwidth = oimg.width;
}
if (oimg.width <425 || oimg.Height == 0) {
iHeight = 425;
}outro{
iHeight = oimg.Height;
}
var iLeft = parseint ((document.documentElement.clientWidth / 2) - (iWidth / 2));
var itop = parseint ((document.documentElement.clientHeight / 2) - (iHeight / 2) - 50);
com (oimg.style) {
altura = width = "100%";
}
StartMove (OfRame, {Opacity: 100, Esquerda: Ileft, Top: Itop, Largura: Iwidth, Altura: IHeight});
obg.style.display = "bloco";
obot.style.display = "bloco";
iNow = this.index + 1;
};
}
document.onmousedown = function () {
retornar falso;
};
abli [0] .OnClick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
EU IA--;
var pathimg = document.getElementById (id) .Name;
OfRame.innerhtml = "<img id =/" " + id +"/"onMouseOver = 'upNext (this)' src =/" " + patiMg +"/"largura =/" 100%/"altura =/" 100 100 % /" />";
};
abli [1] .OnClick = function () {
OfRame.style.cursor = "move";
OfRame.onMousedown = function (e) {
var oevent = e || evento;
var x = oevent.clientX - ofram.offsetleft;
var y = oevent.clienty - ofram.offsettop;
document.onMousEmove = function (e) {
var oevent = e || evento;
var L = oEvent.ClientX - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} outro {
if (l> document.documentElement.clientWidth - ofram.offsetWidth) {
L = document.documentElement.clientWidth - ofram.offsetWidth;
}
}
if (t <0) {
T = 0;
} outro {
if (t> document.documentElement.clientHeight - ofram.offsetheight) {
T = document.documentElement.clientHeight - OfRame.offsetHight;
}
}
OfRame.style.left = l + "px";
OfRame.style.top = t + "px";
OfRame.style.margin = 0;
retornar falso;
};
document.onmouseup = function () {
document.onmouseup = null;
document.onMousEmove = null;
};
retornar 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 =/" " + patiMg +"/"largura =/" 100%/"altura =/" 100 100 % /" />";
};
abli [3] .OnClick = function () {// 箭头关闭事件触发
// alert ("32" + inow - 1);
// alert ("32" + AIMG [INOW - 1] .offSettop);
StartMove (OfRame, {Opacity: 0, Esquerda: Aimg [INOW - 1] .offsetleft, topo: AIMG [INOW - 1] .offSettop, Largura: 150, altura: 100}, function () {
OfRame.style.display = "nenhum";
obg.style.display = "nenhum";
obot.style.display = "nenhum";
OFRAME.ONMOUSEDOWN = NULL;
OfRame.style.cursor = "Auto";
});
};
}
função upNext (bigimg) {
var obox = document.getElementById ("con");
// var ali = obox.getElementsByTagName ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签
var id = bigimg.id;
var de esquerda;
var rightId;
if (id == 0) {
leftId = Ali.length;
correta = 1;
} else if (id == (Ali.Length-1)) {
leftId = (Ali.Length-1);
correta = 0;
}outro{
var de esquerda = id ++;
var RightId = ID--;
}
var esquerdpath = document.getElementById (-leftId) .Name;
var RightPath = document.getElementById (RightId) .Name;
var lefturl = "<img id =/" " + leftid +"/"onMouseOver = 'upNext (this)' src =/" "" + leftPath + "/" width =/"100%/" altura =/"100% /" />";
var Righturl = "<img id =/" " + RETERID +"/"onMouseOver = 'upNext (this)' src =/" "" + rightPath + "/" width =/"100%/" altura =/"100% /" />";
var largura = bigimg.width;
altura var = bigimg.Height;
var imgurl = Righturl;
var ofRame = document.getElementById ("quadro");
bigimg.onmouseMove = function () {
if (event.offsetx <width/2) {
bigimg.style.cursor = 'url (imagens/arr_left.cur), auto';
imgurl = lefturl;
}outro{
bigimg.style.cursor = 'url (imagens/ar_right.cur), auto';
imgurl = righturl;
}
}
bigimg.onmouseup = function () {
if (event.offsetx <width/2) {
OfRame.innerhtml = lefturl;
}outro{
OfRame.innerhtml = Righturl;
}
}
}
função startmove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
DOMOVE (OBJ, JSON, ONEND);
}, 30);
}
função getStyle (obj, att) {
retornar obj.currentstyle? obj.currentStyle [att]: getComputedStyle (obj, false) [att];
}
função domove (obj, json, onend) {
var att = "";
var bstop = true;
para (attr in json) {
var icur = 0;
if (att == "opacidade") {
icur = parseint (parsefloat (getStyle (obj, att)) * 100);
} outro {
icur = parseint (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 == "opacidade") {
obj.style.filter = "alfa (opacidade:" + (icur + ispeed) + ")";
obj.style.Opacity = (ICUR + ISPEED) / 100;
} outro {
obj.style [att] = icur + ispeed + "px";
}
}
if (bstop) {
ClearInterval (obj.timer);
if (onend) {
onend ();
}
}
}
</javascript>
3. 页面 Div 布局:
复制代码代码如下:
<div id = "con">
<tabela CellPadding = "0" CellSpacing = "0"
>
<c: escolha>
<C: Quando test = "$ {empty image_list}">
<TR Style = "Altura: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: quando>
<c: caso contrário>
<%para (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "imagem" itens = "$ {image_list}"
BEGIN = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">>
<td align = "esquerda">
<ul> <li>
<a onclick = "aa (this.id)" id = "s $ {strs.index}">
<img id = "$ {strs.index}" style = "altura: 116px; largura: 116px" src = "< %= wholeproperties.image_image_url %>/$ {image.imagePathsMall}" OnClick = "showpigdyt (this, $ {image.imagePathMiddle}) "name =" < %= integraproperties.image_image_url %>/$ {image.imagePathmiddle} "/> </a>
</li> </ul>
<ul>
<li style = "altura da linha: 20px">
<input type = "caixa de seleção" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<c: escolha>
<c: Quando teste = "$ {fn: length (image.imagename)> 6}">
<C: Out Value = "$ {fn: substring (image.imagename, 0, 6)} ..." />
</c: quando>
<c: caso contrário>
<C: Out Value = "$ {Image.imagename}" />
</c: caso contrário>
</c: escolha>
</li>
<li style = "altura da linha: 20px"> 上传时间: <c: out value = "$ {fn: substring (image.uploadtime, 0,9)}"> </c: out> </li>
<li style = "altura de linha: 20px"> 图片大小: $ {image.imagesize} </li>
</ul>
</td>
</c: foreach>
</tr>
< %} %>
</c: caso contrário>
</c: escolha>
</tabela>
</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 = "quadro"> </div>