核心代码 ：
1.CSS ： 16SUCAI.CSS
复制代码代码如下:
html, tubuh {
Tinggi: 100%;
margin: 0px;
padding: 0px;
}
a {outline: none;}
img {border: 0;}
a img {vertical-align: top;}
a img.last {margin-right: 0; }
.box {
Lebar: 850px;
Tinggi: otomatis;
meluap: tersembunyi;
Latar Belakang: #666;
margin-top: 10px;
margin-kanan: otomatis;
margin-bottom: 10px;
margin-kiri: otomatis;
Padding-top: 10px;
Padding-Right: 0;
Padding-bottom: 0;
Padding-left: 10px;
}
.box ul {
margin: 0px;
padding: 0px;
float: kiri;
Daftar-gaya-tipe: tidak ada;
}
.box li {
Lebar: 150px;
Tinggi: 100px;
float: kiri;
kursor: pointer;
Tampilan: inline;
Margin: 0 10px 10px 0;
Perbatasan: 5px Solid #333;
}
#bg {
Lebar: 100%;
Tinggi: 898px;
Posisi: Absolute;
Kiri: 0px;
Atas: 0px;
Latar belakang: #000;
filter: alpha (opacity: 50);
Opacity: 0,5;
Tampilan: Tidak Ada;
}
#bg1 {
Lebar: 100%;
Tinggi: 100%;
Posisi: Absolute;
Kiri: 0px;
Atas: 0px;
Latar belakang: #000;
filter: alpha (opacity: 50);
Opacity: 0,5;
Tampilan: Tidak Ada;
}
#dasar {
Lebar: 215px;
Tinggi: 50px;
Posisi: Absolute;
Kiri: 50%;
Bawah: 0px;
margin: 0 0 0 -107px;
Perbatasan: 1px Solid #232323;
Latar Belakang: #444;
padding: 1px;
z-index: 1;
Tampilan: Tidak Ada;
}
#bottom ul {
Lebar: 100%;
Tinggi: 100%;
margin: 0px;
padding: 0px;
Daftar-gaya-tipe: tidak ada;
Latar belakang: #000;
}
#bottom li {
Latar belakang: url (../ gambar/ico.jpg) no-repeat;
float: kiri;
Tampilan: inline;
margin: 8px 0 0 18px;
kursor: pointer;
}
#bottom li.prev {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: 0 0;
}
#bottom li.next {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: -35px 0;
}
#bottom li.img {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: -106px 0;
}
#bottom li.close {
Lebar: 31px;
Tinggi: 33px;
Latar belakang posisi: -70px 0;
}
#bingkai {
Latar belakang: #FFF;
padding: 3px;
Posisi: Absolute;
z-index: 2;
Tampilan: Tidak Ada;
filter: alpha (opacity: 0);
Opacity: 0;
Teks-Align: tengah;
}
#Bottom1 {
Lebar: 215px;
Tinggi: 50px;
Posisi: Absolute;
Kiri: 50%;
Bawah: 0px;
margin: 0 0 0 -107px;
Perbatasan: 1px Solid #232323;
Latar Belakang: #444;
padding: 1px;
z-index: 1;
Tampilan: Tidak Ada;
}
#Bottom1 ul {
Lebar: 100%;
Tinggi: 100%;
margin: 0px;
padding: 0px;
Daftar-gaya-tipe: tidak ada;
Latar belakang: #000;
}
#Bottom1 li {
latar belakang: url (../../ gambar/ico.jpg) no-rePeat;
float: kiri;
Tampilan: inline;
margin: 8px 0 0 18px;
kursor: pointer;
}
#Bottom1 li.prev {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: 0 0;
}
#Bottom1 li.next {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: -35px 0;
}
#Bottom1 li.img {
Lebar: 30px;
Tinggi: 33px;
Latar belakang posisi: -106px 0;
}
#Bottom1 li.close {
Lebar: 31px;
Tinggi: 33px;
Latar belakang posisi: -70px 0;
}
#frame1 {
Latar belakang: #FFF;
padding: 3px;
Posisi: Absolute;
z-index: 2;
Tampilan: Tidak Ada;
filter: alpha (opacity: 0);
Opacity: 0;
Teks-Align: tengah;
}
/
html, tubuh {
Tinggi: 100%;
margin: 0px;
font-size: 12px;
}
.mydiv {
latar belakang-warna: #ffcc66;
latar belakang: url (../ gambar/loginbg.png) tidak-repeat;
BORDER: 0PX SOLID #F00;
overflow-y: otomatis;
overflow-x: otomatis;
Teks-Align: tengah;
Line-Height: 40px;
font-size: 12px;
font-weight: tebal;
z-index: 999;
Lebar: 434px;
Tinggi: 238px;
Kiri: 50%;
Atas: 50%;
margin -kiri: -200px! Penting; / *Ff IE7 该值为本身宽的一半 */
margin -top: -80px! Penting; /*Ff IE7 该值为本身高的一半*/
margin-top: 0px;
Posisi: Memperbaiki! Penting; /* Ff IE7*/
Posisi: Absolute; /*Ie6*/
_top: ekspresi (eval (dokumen. compatmode &&
dokumen. compatMode == 'css1compat')?
DocumentElement. Scrolltop + (dokumen.
DocumentElement. ClientHeight-ini. OffsetHeight)/ 2:/*ie6*/
dokumen. tubuh . Scrolltop + (Dokumen. Body.
ClientHeight - ini. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.mydiv1 {
latar belakang-warna: #ffcc66;
BORDER: 0PX SOLID #F00;
Teks-Align: tengah;
Line-Height: 40px;
font-size: 12px;
font-weight: tebal;
overflow-y: otomatis;
overflow-x: otomatis;
z-index: 999;
Lebar: 434px;
Tinggi: 238px;
Kiri: 50%;
Atas: 50%;
margin -kiri: -200px! Penting; / *Ff IE7 该值为本身宽的一半 */
margin -top: -80px! Penting; /*Ff IE7 该值为本身高的一半*/
margin-top: 0px;
Posisi: Memperbaiki! Penting; /* Ff IE7*/
Posisi: Absolute; /*Ie6*/
_top: ekspresi (eval (dokumen. compatmode &&
dokumen. compatMode == 'css1compat')?
DocumentElement. Scrolltop + (dokumen.
DocumentElement. ClientHeight-ini. OffsetHeight)/ 2:/*ie6*/
dokumen. tubuh . Scrolltop + (Dokumen. Body.
ClientHeight - ini. ClientHeight)/ 2); /*IE5 IE5.5*/
}
.bg, .popiframe {
Latar Belakang-Color: #666;
Tampilan: Tidak Ada;
Lebar: 100%;
Tinggi: 100%;
Kiri: 0;
TOP: 0; /*Ff IE7*/
filter: alpha (opacity = 50); /*YAITU*/
Opacity: 0,5; /*Ff*/
z-index: 1;
Posisi: Memperbaiki! Penting; /*Ff IE7*/
Posisi: Absolute; /*Ie6*/
_top: ekspresi (eval (dokumen. compatmode &&
dokumen. compatMode == 'css1compat')?
DocumentElement. Scrolltop + (dokumen.
DocumentElement. ClientHeight-ini. OffsetHeight)/ 2:/*ie6*/
dokumen. tubuh . Scrolltop + (Dokumen. Body.
ClientHeight - ini. ClientHeight)/ 2);
}
.popiframe {
filter: alpha (opacity = 0); /*YAITU*/
Opacity: 0; /*Ff*/
}
2.js ： ：
复制代码代码如下:
<tautan rel = "stylesheet" type = "text/css" href = "<%= path%>/css/16sucai.css"/>
<type skrip = "Teks/JavaScript">
fungsi aa (id) {
var id = id.substring (1,2);
var obj2 = document.geteLementById (id);
showpigdyt (obj2);
}
function showInfo (id)
{
document.geteLementById (id) .style.display = "block";
}
Fungsi HiddenInfo (ID)
{
document.geteLementById (id) .style.display = "none";
}
</script>
<bahasa skrip = "javascript">
// 首页点击查看景点热门照片
fungsi showpigdyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById ("con");
var obg = document.geteLementById ("bg");
var obot = document.getElementById ("bubuk");
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 标签 (集合)
// peringatan (AIMG);
var i = inow = 0;
untuk (i = 0; i <ali.length; i ++) {
Ali [i] .index = i;
Ali [i] .onClick = function () {
dengan (OfRame.Style) {
display = "block", top = this.offsettop + "px", left = this.offsetleft + "px", width = this.offsetWidth + "px", height = this.offsetHeight + "px";
}
// peringatan (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;
}kalau tidak{
iwidth = oimg.width;
}
if (oimg.width <425 || oimg.height == 0) {
Iheight = 425;
}kalau tidak{
iheight = oimg.height;
}
var ileft = parseInt ((document.documentelement.clientwidth / 2) - (iwidth / 2));
var itop = parseInt ((document.documentelement.clientHeight / 2) - (iheight / 2) - 50);
dengan (oimg.style) {
tinggi = lebar = "100%";
}
startMove (ofRame, {opacity: 100, kiri: ileft, atas: ITOP, lebar: iwidth, tinggi: iheight});
obg.style.display = "block";
obot.style.display = "block";
inow = this.index + 1;
};
}
document.onmousedown = function () {
mengembalikan false;
};
abli [0] .onClick = function () {// 箭头向左事件触发
if (id == 0) {
Id = ali.length;
}
PENGENAL--;
var patimg = document.getElementById (id) .name;
oframe.innerHtml = "<img id =/" " + id +"/"onMouseOver = 'upnext (this)' src =/" " + patimg +"/"width =/" 100%/"height =/" 100 % /" />";
};
abli [1] .onClick = function () {
OfRame.Style.Cursor = "Move";
ofRame.onmousedown = function (e) {
var oevent = e || peristiwa;
var x = oevent.clientx - oframe.offsetleft;
var y = oevent.clienty - oframe.offsettop;
document.onmouseMove = function (e) {
var oevent = e || peristiwa;
var l = oevent.clientx - x;
var t = oevent.clienty - y;
if (l <0) {
L = 0;
} kalau tidak {
if (l> document.documentelement.clientwidth - ofRame.offsetWidth) {
L = document.documentElement.clientwidth - ofRame.offsetWidth;
}
}
if (t <0) {
T = 0;
} kalau tidak {
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;
mengembalikan false;
};
document.onmouseup = function () {
document.onmouseup = null;
document.onmouseMove = null;
};
mengembalikan false;
};
};
abli [2] .onClick = function () {// 箭头向右事件触发
if (id == (ali.length-1)) {
Id = -1;
}
Id ++;
var patimg = document.getElementById (id) .name;
oframe.innerHtml = "<img id =/" " + id +"/"onMouseOver = 'upnext (this)' src =/" " + patimg +"/"width =/" 100%/"height =/" 100 % /" />";
};
abli [3] .onClick = function () {// 箭头关闭事件触发
// peringatan ("32" + inow - 1);
// alert ("32" + AIMG [inow - 1]. OFFSETTOP);
startMove (ofRame, {opacity: 0, kiri: AIMG [inow - 1] .offsetleft, atas: AIMG [inow - 1] .offsettop, lebar: 150, tinggi: 100}, function () {
OfRame.Style.Display = "None";
obg.style.display = "none";
obot.style.display = "none";
oframe.onmousedown = null;
OfRame.Style.Cursor = "Auto";
});
};
}
function 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) {
leftid = ali.length;
RightID = 1;
} else if (id == (ali.length-1)) {
leftid = (ali.length-1);
RightID = 0;
}kalau tidak{
var leftid = id ++;
var rightId = id--;
}
var leftpath = document.getElementById (-leftId) .name;
var rightpath = document.getElementById (rightId) .name;
var lefturl = "<img id =/" " + leftId +"/"onMouseOver = 'upnext (this)' src =/" " + leftpath +"/"width =/" 100%/"height =/" 100% /" />";
var rightUrl = "<img id =/" " + rightId +"/"onMouseOver = 'upnext (this)' src =/" " + rightpath +"/"width =/" 100%/"height =/" 100% /" />";
var width = bigimg.width;
var tinggi = bigimg.height;
var imgurl = rightUrl;
var ofRame = document.getElementById ("frame");
bigimg.onmouseMove = function () {
if (event.offsetx <width/2) {
bigimg.style.cursor = 'url (gambar/arr_left.cur), auto';
imgurl = lefturl;
}kalau tidak{
bigimg.style.cursor = 'url (gambar/arr_right.cur), otomatis';
imgurl = rightUrl;
}
}
bigimg.onmouseup = function () {
if (event.offsetx <width/2) {
oframe.innerHtml = lefturl;
}kalau tidak{
oframe.innerHtml = rightUrl;
}
}
}
fungsi startMove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
Domove (OBJ, JSON, ONEND);
}, 30);
}
fungsi getStyle (obj, attr) {
Kembalikan Obj.CurrentStyle? obj.currentstyle [attr]: getComputedstyle (obj, false) [attr];
}
fungsi domove (obj, json, onend) {
var attr = "";
var bstop = true;
untuk (attr in json) {
var icur = 0;
if (attr == "opacity") {
icur = parseInt (parsefloat (getStyle (obj, attr)) * 100);
} kalau tidak {
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 == "opacity") {
obj.style.filter = "alpha (opacity:" + (icur + iSpeed) + ")";
obj.style.opacity = (icur + iSpeed) / 100;
} kalau tidak {
obj.style [attr] = icur + ispeed + "px";
}
}
if (bstop) {
ClearInterval (obj.timer);
if (onend) {
onend ();
}
}
}
</javascript>
3. 页面 Div 布局 ：
复制代码代码如下:
<Div id = "con">
<tabel cellpadding = "0" cellspacing = "0"
>
<C: Pilih>
<c: when test = "$ {kosong gambar_list}">
<tr style = "tinggi: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: When>
<C: jika tidak>
<%untuk (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "image" items = "$ {image_list}"
begin = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">
<td align = "kiri">
<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 (ini, $ {gambar {image.imagePathMiddle}) "name =" < %= wholeProperties.image_image_url %>/$ {image.imagePathMiddle} "/> </a>
</li> </ul>
<ul>
<li style = "Line-height: 20px">
<input type = "centang kotak" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<C: Pilih>
<c: when test = "$ {fn: length (image.imagename)> 6}">
<c: out value = "$ {fn: substring (image.imagename, 0, 6)} ..." />
</c: When>
<C: jika tidak>
<c: out value = "$ {image.imagename}" />
</c: jika tidak>
</c: pilih>
</li>
<li style = "Line-height: 20px"> ： ： <c: out value = "$ {fn: substring (gambar.uploadtime, 0,9)}"> </c: out> </li>
<li style = "Line-height: 20px"> 图片大小 ： $ {image.imageSize} </li>
</ul>
</td>
</c: foreach>
</tr>
< %} %>
</c: jika tidak>
</c: pilih>
</boable>
</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>