核心代码 :
1.CSS: 16Sucai.css
复制代码代码如下::
html, Körper {
Höhe: 100%;
Rand: 0px;
Polsterung: 0px;
}
a {umriss: keine;}
img {Border: 0;}
a img {vertikal-align: top;}
a img.last {margin-right: 0; }
.Kasten {
Breite: 850px;
Höhe: Auto;
Überlauf: versteckt;
Hintergrund: #666;
Rand: 10px;
Margin-Right: Auto;
Randboden: 10px;
Rand-Links: Auto;
Padding-Top: 10px;
Padding-Rechts: 0;
Padding-Bottom: 0;
Padding-Links: 10px;
}
.box ul {
Rand: 0px;
Polsterung: 0px;
float: links;
Typ-Typ-Typ: Keine;
}
.box li {
Breite: 150px;
Höhe: 100px;
float: links;
Cursor: Zeiger;
Anzeige: Inline;
Rand: 0 10px 10px 0;
Grenze: 5px fest #333;
}
#bg {
Breite: 100%;
Höhe: 898px;
Position: absolut;
links: 0px;
Oben: 0px;
Hintergrund: #000;
Filter: Alpha (Deckkraft: 50);
Deckkraft: 0,5;
Anzeige: Keine;
}
#BG1 {
Breite: 100%;
Höhe: 100%;
Position: absolut;
links: 0px;
Oben: 0px;
Hintergrund: #000;
Filter: Alpha (Deckkraft: 50);
Deckkraft: 0,5;
Anzeige: Keine;
}
#unten {
Breite: 215px;
Höhe: 50px;
Position: absolut;
Links: 50%;
unten: 0px;
Rand: 0 0 0 -107px;
Grenze: 1PX Solid #232323;
Hintergrund: #444;
Polsterung: 1PX;
Z-Index: 1;
Anzeige: Keine;
}
#bottom ul {
Breite: 100%;
Höhe: 100%;
Rand: 0px;
Polsterung: 0px;
Typ-Typ-Typ: Keine;
Hintergrund: #000;
}
#bottom li {
Hintergrund: URL (../ Bilder/ICO.JPG) No-Repeat;
float: links;
Anzeige: Inline;
Rand: 8px 0 0 18px;
Cursor: Zeiger;
}
#bottom li.prev {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: 0 0;
}
#bottom li.next {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: -35px 0;
}
#bottom li.img {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: -106px 0;
}
#bottom li.close {
Breite: 31px;
Höhe: 33px;
Hintergrundposition: -70px 0;
}
#rahmen {
Hintergrund: #fff;
Polsterung: 3px;
Position: absolut;
Z-Index: 2;
Anzeige: Keine;
Filter: Alpha (Deckkraft: 0);
Deckkraft: 0;
Text-Align: Mitte;
}
#bottom1 {
Breite: 215px;
Höhe: 50px;
Position: absolut;
Links: 50%;
unten: 0px;
Rand: 0 0 0 -107px;
Grenze: 1PX Solid #232323;
Hintergrund: #444;
Polsterung: 1PX;
Z-Index: 1;
Anzeige: Keine;
}
#bottom1 ul {
Breite: 100%;
Höhe: 100%;
Rand: 0px;
Polsterung: 0px;
Typ-Typ-Typ: Keine;
Hintergrund: #000;
}
#bottom1 li {
Hintergrund: URL (../../ Bilder/ICO.JPG) No-Repeat;
float: links;
Anzeige: Inline;
Rand: 8px 0 0 18px;
Cursor: Zeiger;
}
#bottom1 li.prev {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: 0 0;
}
#bottom1 li.next {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: -35px 0;
}
#bottom1 li.img {
Breite: 30px;
Höhe: 33px;
Hintergrundposition: -106px 0;
}
#bottom1 li.close {
Breite: 31px;
Höhe: 33px;
Hintergrundposition: -70px 0;
}
#Frame1 {
Hintergrund: #fff;
Polsterung: 3px;
Position: absolut;
Z-Index: 2;
Anzeige: Keine;
Filter: Alpha (Deckkraft: 0);
Deckkraft: 0;
Text-Align: Mitte;
}
/
html, Körper {
Höhe: 100%;
Rand: 0px;
Schriftgröße: 12px;
}
.Mydiv {
Hintergrundfarbe: #FFCC66;
Hintergrund: URL (../ Bilder/loginbg.png) No-Repeat;
Grenze: 0px fest #f00;
Überlauf-y: Auto;
Überlauf-X: Auto;
Text-Align: Mitte;
Zeilenhöhe: 40px;
Schriftgröße: 12px;
Schriftgewicht: fett;
Z-Index: 999;
Breite: 434px;
Höhe: 238px;
Links: 50%;
Top: 50%;
Rand -Links: -200px! Wichtig; / *Ff ie7 该值为本身宽的一半 */
Rand: -80px! Wichtig; /*Ff ie7 该值为本身高的一半*/
Rand: 0px;
Position: behoben! Wichtig; /* Ff ie7*/
Position: absolut; /*Ie6*/
_top: Ausdruck (Eval (Dokument. Compatmode &&
dokumentieren . compatmode == 'css1Compat')?
Dokumentelement. Scrolltop + (Dokument.
Dokumentelement. ClientHeight-This. offseteight)/ 2:/*ie6*/
dokumentieren . Körper . Scrolltop + (Dokument. Körper.
ClientHeight - das. ClientHeight)/ 2); /*IE5 IE5.5*//
}
.MyDIV1 {
Hintergrundfarbe: #FFCC66;
Grenze: 0px fest #f00;
Text-Align: Mitte;
Zeilenhöhe: 40px;
Schriftgröße: 12px;
Schriftgewicht: fett;
Überlauf-y: Auto;
Überlauf-X: Auto;
Z-Index: 999;
Breite: 434px;
Höhe: 238px;
Links: 50%;
Top: 50%;
Rand -Links: -200px! Wichtig; / *Ff ie7 该值为本身宽的一半 */
Rand: -80px! Wichtig; /*Ff ie7 该值为本身高的一半*/
Rand: 0px;
Position: behoben! Wichtig; /* Ff ie7*/
Position: absolut; /*Ie6*/
_top: Ausdruck (Eval (Dokument. Compatmode &&
dokumentieren . compatmode == 'css1Compat')?
Dokumentelement. Scrolltop + (Dokument.
Dokumentelement. ClientHeight-This. offseteight)/ 2:/*ie6*/
dokumentieren . Körper . Scrolltop + (Dokument. Körper.
ClientHeight - das. ClientHeight)/ 2); /*IE5 IE5.5*//
}
.bg, .popiframe {
Hintergrundfarbe: #666;
Anzeige: Keine;
Breite: 100%;
Höhe: 100%;
links: 0;
Top: 0; /*Ff ie7*/
Filter: Alpha (Opazität = 50); /*Dh*/
Deckkraft: 0,5; /*Ff*/
Z-Index: 1;
Position: behoben! Wichtig; /*Ff ie7*/
Position: absolut; /*Ie6*/
_top: Ausdruck (Eval (Dokument. Compatmode &&
dokumentieren . compatmode == 'css1Compat')?
Dokumentelement. Scrolltop + (Dokument.
Dokumentelement. ClientHeight-This. offseteight)/ 2:/*ie6*/
dokumentieren . Körper . Scrolltop + (Dokument. Körper.
ClientHeight - das. ClientHeight)/ 2);
}
.popiframe {
Filter: Alpha (Opazität = 0); /*Dh*/
Deckkraft: 0; /*Ff*/
}
2.js 事件 :
复制代码代码如下::
<link rel = "stylesheet" type = "text/css" href = "<%= path%>/css/16sucai.css"/>
<script type = "text/javaScript">
Funktion aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementById (id);
Showpigdyt (obj2);
}
FunktionshowInfo (ID)
{
document.getElementById (id) .style.display = "block";
}
Funktion Hiddeninfo (ID)
{
document.getElementById (id) .style.display = "Keine";
}
</script>
<script Language = "JavaScript">
// 首页点击查看景点热门照片
Funktion showpigdyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById ("con");
var obg = document.getElementById ("bg");
var obot = document.getElementById ("boden");
var abli = obot.getElementsByTagName ("li");
var oframe = document.getElementById ("Frame");
// var ali = obox.getElementsByTagName ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签 (集合)
// var imAmg = obox.getElementsByTagName ("img");
var aimg = $ ("img [class = 'conn']"); // 获取所有 a 标签里的 img 标签 (集合)
// alarm (AIMG);
var i = Inow = 0;
für (i = 0; i <ali.length; i ++) {
Ali [i] .Index = i;
Ali [i] .onclick = function () {
mit (Oframe.Style) {
display = "block", top = this.offsettop + "px", links = this.offsetLeft + "px", width = this.offsetwidth + "px", Höhe = this.offseteight + "px";
}
// alarm (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;
}anders{
iwidth = oimg.width;
}
if (oimg.width <425 || oimg.height == 0) {
iHeight = 425;
}anders{
iHeight = oimg.Height;
}
var ileft = parseInt ((document.documentElement.clientwidth / 2) - (iwidth / 2));
var itop = parseInt ((document.documentElement.clientHeight / 2) - (iHeight / 2) - 50);
mit (oimg.style) {
Höhe = Breite = "100%";
}
startMove (Oframe, {Opazität: 100, links: ileft, oben: itop, width: iwidth, Höhe: iHeight});
obg.style.display = "block";
Obot.Style.Display = "Block";
Inow = this.index + 1;
};
}
document.onmouseDown = function () {
false zurückgeben;
};
Abli [0] .onclick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
AUSWEIS--;
var pathimg = document.getElementById (id) .name;
Oframe.innerhtml = "<img id =/" " + id +"/"onmouseover = 'Upnext (this)' src =/" " + pathimg +"/"width =/" 100%/"High =/" 100 % /" />";
};
Abli [1] .onclick = function () {
Oframe.Style.cursor = "Move";
OFrame.onmouseDown = Funktion (e) {
var oevent = e || Ereignis;
var x = oevent.clientX - OFrame.OffsetLeft;
var y = oevent.clienty - OFrame.OffSettop;
document.onmousemove = function (e) {
var oevent = e || Ereignis;
var l = oevent.clientX - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} anders {
if (l> document.documentElement.clientwidth - oframe.Offsetwidth) {
L = document.documentElement.clientwidth - OFrame.Offsetwidth;
}
}
if (t <0) {
T = 0;
} anders {
if (t> document.documentElement.clientHeight - Oframe.offseteight) {
T = document.documentElement.clientHeight - Oframe.Offseteight;
}
}
Oframe.Style.Left = l + "px";
Oframe.Style.top = t + "px";
Oframe.Style.Margin = 0;
false zurückgeben;
};
document.onmouseUp = function () {
document.onmouseUp = null;
document.onmousemove = null;
};
false zurückgeben;
};
};
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%/"High =/" 100 % /" />";
};
Abli [3] .onclick = function () {// 箭头关闭事件触发
// alert ("32" + Inow - 1);
// alert ("32" + imAmg [Inow - 1] .offsettop);
StartMove (Oframe, {Opazität: 0, links: AIMG [INOW - 1] .Offsetleft, Top: AIMG [INOW - 1] .Offsettop, Breite: 150, Höhe: 100}, Funktion () {
Oframe.Style.Display = "Keine";
obg.style.display = "Keine";
Obot.Style.Display = "Keine";
OFrame.onmouseDown = null;
Oframe.Style.cursor = "Auto";
});
};
}
Funktion upNext (Bigimg) {
var obox = document.getElementById ("con");
// var ali = obox.getElementsByTagName ("li");
var ali = $ ("li [class = 'conn']"); // 获取所有 a 标签的 li 标签
var id = bigimg.id;
var linksid;
var rightid;
if (id == 0) {
links = ali.length;
RightID = 1;
} else if (id == (ali.length-1)) {
linke id = (ali.length-1);
RightID = 0;
}anders{
var links = id ++;
var rightid = id--;
}
var links path = document.getElementById (-links) .Name;
var rightPath = document.getElementById (rightId) .name;
var LeftUrl = "<img id =/" " + links +"/"onmouseover = 'upnext (this)' src =/" " + linke path +"/"width =/" 100%/"Höhe =/" 100% /" />";
var rightUrl = "<img id =/" " + rightid +"/"onmouseover = 'upnext (this)' src =/" " + rightPath +"/"width =/" 100%/"height =/" 100% /" />";
var width = bigimg.width;
var height = bigimg.height;
var imgurl = righturl;
var oframe = document.getElementById ("Frame");
bigimg.onmousemove = function () {
if (event.OffsetX <width/2) {
bigimg.style.cursor = 'url (Bilder/arr_left.cur), auto';
imgurl = links;
}anders{
Bigimg.Style.cursor = 'url (Bilder/arr_right.cur), auto';
imgurl = righturl;
}
}
bigimg.onmouseUp = function () {
if (event.OffsetX <width/2) {
Oframe.innerhtml = links;
}anders{
Oframe.innerhtml = Righturl;
}
}
}
Funktion startMove (OBJ, JSON, ONEND) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
Domove (OBJ, JSON, ONEND);
}, 30);
}
Funktion getStyle (obj, attr) {
Rückgabe obj.currentStyle? obj.currentStyle [attr]: GetComputedStyle (obj, falsch) [Attr];
}
Funktion Domove (OBJ, JSON, ONEND) {
var attr = "";
var bstop = true;
für (attr in json) {
var icur = 0;
if (attr == "Depazität") {
ICUR = ParseInt (Parsefloat (GetStyle (obj, attr)) * 100);
} anders {
ICUR = ParseInt (GetStyle (obj, attr));
}
var ispeed = (json [attr] - icur) / 5;
ispeed = isspeed> 0? Math.ceil (ispeed): math.floor (ispeed);
if (json [attr]! = icur) {
BStop = false;
}
if (attr == "Depazität") {
Obj.Style.filter = "Alpha (Deckkraft:" + (icur + ispeed) + ")";
Obj.Style.opacity = (ICUR + ISPEED) / 100;
} anders {
Obj.Style [attr] = icur + ispeed + "px";
}
}
if (bStop) {
ClearInterval (obj.timer);
if (betreten) {
betreten ();
}
}
}
</javaScript>
3. 页面 div 布局 :
复制代码代码如下::
<div id = "con">
<table CellPadding = "0" cellspacing = "0"
>
<C: Wählen Sie>
<c: wenn test = "$ {leer image_list}">
<tr style = "Höhe: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: wenn>
<c: sonst>
<%für (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "Bild" items = "$ {image_list}"
begin = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">
<td align = "links">
<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 =" < %= ploxeprerties.image_image_url %>/$ {image.imagePathMiddle} "/> </a>
</li> </ul>
<ul>
<li style = "Zeilenhöhe: 20px">
<Eingabe type = "checkBox" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<C: Wählen Sie>
<C: Wenn test = "$ {fn: lenge (image.imagename)> 6}">
<c: out value = "$ {fn: substring (image.imagename, 0, 6)} ..." />
</c: wenn>
<c: sonst>
<c: out value = "$ {image.imagename}" />
</c: sonst>
</c: Wählen Sie>
</li>
<li style = "Zeilenhöhe: 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: sonst>
</c: Wählen Sie>
</table>
</div>
<div> </div>
<div> </div>
<div id = "bg"> </div>
<div id = "boden">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id = "Frame"> </div>