核心代码:
1.CSS: 16SUCAI.CSS
复制代码代码如下:
html, body {
ความสูง: 100%;
มาร์จิ้น: 0px;
Padding: 0px;
-
A {โครงร่าง: ไม่มี;}
img {border: 0;}
A img {แนวตั้ง-แนว: top;}
img.last {มาร์จิ้น-ขวา: 0; -
.กล่อง {
ความกว้าง: 850px;
ความสูง: อัตโนมัติ;
ล้น: ซ่อน;
ความเป็นมา: #666;
ระยะขอบด้านบน: 10px;
มาร์จิ้น-ขวา: อัตโนมัติ;
มาร์จิ้น-ก้น: 10px;
ขอบซ้าย: อัตโนมัติ;
Padding-Top: 10px;
Padding-Right: 0;
การรองลงด้านล่าง: 0;
Padding-Left: 10px;
-
.Box ul {
มาร์จิ้น: 0px;
Padding: 0px;
ลอย: ซ้าย;
ประเภทรายการประเภท: ไม่มี;
-
.Box Li {
ความกว้าง: 150px;
ความสูง: 100px;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
แสดง: อินไลน์;
มาร์จิ้น: 0 10px 10px 0;
ชายแดน: 5px Solid #333;
-
#bg {
ความกว้าง: 100%;
ความสูง: 898px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านบน: 0px;
ความเป็นมา: #000;
ตัวกรอง: อัลฟ่า (ความทึบ: 50);
ความทึบ: 0.5;
แสดง: ไม่มี;
-
#bg1 {
ความกว้าง: 100%;
ความสูง: 100%;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านบน: 0px;
ความเป็นมา: #000;
ตัวกรอง: อัลฟ่า (ความทึบ: 50);
ความทึบ: 0.5;
แสดง: ไม่มี;
-
#ด้านล่าง {
ความกว้าง: 215px;
ความสูง: 50px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 50%;
ด้านล่าง: 0px;
มาร์จิ้น: 0 0 0 -107px;
ชายแดน: 1px Solid #232323;
ความเป็นมา: #444;
ช่องว่าง: 1px;
z-index: 1;
แสดง: ไม่มี;
-
#bottom ul {
ความกว้าง: 100%;
ความสูง: 100%;
มาร์จิ้น: 0px;
Padding: 0px;
ประเภทรายการประเภท: ไม่มี;
ความเป็นมา: #000;
-
#bottom li {
ความเป็นมา: url (../ images/ico.jpg) ไม่ต้องทำซ้ำ
ลอย: ซ้าย;
แสดง: อินไลน์;
มาร์จิ้น: 8px 0 0 18px;
เคอร์เซอร์: ตัวชี้;
-
#bottom li.prev {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: 0 0;
-
#bottom li.next {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -35px 0;
-
#bottom li.img {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -106px 0;
-
#bottom li.close {
ความกว้าง: 31px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -70px 0;
-
#frame {
ความเป็นมา: #FFF;
Padding: 3px;
ตำแหน่ง: สัมบูรณ์;
z-index: 2;
แสดง: ไม่มี;
ตัวกรอง: อัลฟ่า (ความทึบ: 0);
ความทึบ: 0;
TEXT-ALIGN: CENTER;
-
#bottom1 {
ความกว้าง: 215px;
ความสูง: 50px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 50%;
ด้านล่าง: 0px;
มาร์จิ้น: 0 0 0 -107px;
ชายแดน: 1px Solid #232323;
ความเป็นมา: #444;
ช่องว่าง: 1px;
z-index: 1;
แสดง: ไม่มี;
-
#bottom1 ul {
ความกว้าง: 100%;
ความสูง: 100%;
มาร์จิ้น: 0px;
Padding: 0px;
ประเภทรายการประเภท: ไม่มี;
ความเป็นมา: #000;
-
#bottom1 li {
พื้นหลัง: url (../../ images/ico.jpg) ไม่ต้องทำซ้ำ
ลอย: ซ้าย;
แสดง: อินไลน์;
มาร์จิ้น: 8px 0 0 18px;
เคอร์เซอร์: ตัวชี้;
-
#bottom1 li.prev {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: 0 0;
-
#bottom1 li.next {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -35px 0;
-
#bottom1 li.img {
ความกว้าง: 30px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -106px 0;
-
#bottom1 li.close {
ความกว้าง: 31px;
ความสูง: 33px;
ตำแหน่งพื้นหลัง: -70px 0;
-
#frame1 {
ความเป็นมา: #FFF;
Padding: 3px;
ตำแหน่ง: สัมบูรณ์;
z-index: 2;
แสดง: ไม่มี;
ตัวกรอง: อัลฟ่า (ความทึบ: 0);
ความทึบ: 0;
TEXT-ALIGN: CENTER;
-
-
html, body {
ความสูง: 100%;
มาร์จิ้น: 0px;
ขนาดฟอนต์: 12px;
-
.mydiv {
พื้นหลังสี: #FFCC66;
ความเป็นมา: url (../ images/loginbg.png) ไม่ทำซ้ำ;
ชายแดน: 0PX Solid #F00;
Overflow-y: อัตโนมัติ;
Overflow-X: อัตโนมัติ;
TEXT-ALIGN: CENTER;
สายไฟ: 40px;
ขนาดฟอนต์: 12px;
Font-Weight: ตัวหนา;
z-index: 999;
ความกว้าง: 434px;
ความสูง: 238px;
ซ้าย: 50%;
ด้านบน: 50%;
ขอบซ้าย: -200px! สำคัญ; / *ff ie7 该值为本身宽的一半 */
ระยะขอบด้านบน: -80px! สำคัญ; /*ff ie7 该值为本身高的一半*/
ระยะขอบด้านบน: 0px;
ตำแหน่ง: แก้ไข! สำคัญ; /* ff ie7*/
ตำแหน่ง: สัมบูรณ์; /*IE6*/
_top: นิพจน์ (eval (เอกสาร. compatMode &&
เอกสาร . compatMode == 'CSS1COMPAT')?
DocumentElement Scrolltop + (เอกสาร
DocumentElement clientHeight-นี่ Offsetheight)/ 2:/*IE6*/
เอกสาร . ร่างกาย . Scrolltop + (เอกสาร. ร่างกาย
ClientHeight - นี่ clientHeight)/ 2); /*IE5 IE5.5*/
-
.MYDIV1 {
พื้นหลังสี: #FFCC66;
ชายแดน: 0PX Solid #F00;
TEXT-ALIGN: CENTER;
สายไฟ: 40px;
ขนาดฟอนต์: 12px;
Font-Weight: ตัวหนา;
Overflow-y: อัตโนมัติ;
Overflow-X: อัตโนมัติ;
z-index: 999;
ความกว้าง: 434px;
ความสูง: 238px;
ซ้าย: 50%;
ด้านบน: 50%;
ขอบซ้าย: -200px! สำคัญ; / *ff ie7 该值为本身宽的一半 */
ระยะขอบด้านบน: -80px! สำคัญ; /*ff ie7 该值为本身高的一半*/
ระยะขอบด้านบน: 0px;
ตำแหน่ง: แก้ไข! สำคัญ; /* ff ie7*/
ตำแหน่ง: สัมบูรณ์; /*IE6*/
_top: นิพจน์ (eval (เอกสาร. compatMode &&
เอกสาร . compatMode == 'CSS1COMPAT')?
DocumentElement Scrolltop + (เอกสาร
DocumentElement clientHeight-นี่ Offsetheight)/ 2:/*IE6*/
เอกสาร . ร่างกาย . Scrolltop + (เอกสาร. ร่างกาย
ClientHeight - นี่ clientHeight)/ 2); /*IE5 IE5.5*/
-
.bg, .popiframe {
พื้นหลังสี: #666;
แสดง: ไม่มี;
ความกว้าง: 100%;
ความสูง: 100%;
ซ้าย: 0;
ด้านบน: 0; /*ff ie7*/
ตัวกรอง: อัลฟ่า (ความทึบ = 50); /*เช่น*/
ความทึบ: 0.5; /*ff*/
z-index: 1;
ตำแหน่ง: แก้ไข! สำคัญ; /*ff ie7*/
ตำแหน่ง: สัมบูรณ์; /*IE6*/
_top: นิพจน์ (eval (เอกสาร. compatMode &&
เอกสาร . compatMode == 'CSS1COMPAT')?
DocumentElement Scrolltop + (เอกสาร
DocumentElement clientHeight-นี่ Offsetheight)/ 2:/*IE6*/
เอกสาร . ร่างกาย . Scrolltop + (เอกสาร. ร่างกาย
ClientHeight - นี่ clientHeight)/ 2);
-
.popiframe {
ตัวกรอง: อัลฟ่า (ความทึบ = 0); /*เช่น*/
ความทึบ: 0; /*ff*/
-
2.JS 事件:
复制代码代码如下:
<link rel = "stylesheet" type = "text/css" href = "<%= path%>/css/16sucai.css"/>
<script type = "text/javascript">
ฟังก์ชั่น aa (id) {
var id = id.substring (1,2);
var obj2 = document.getElementById (id);
Showpigdyt (OBJ2);
-
ฟังก์ชั่น showinfo (id)
-
document.getElementById (id) .style.display = "block";
-
ฟังก์ชั่น hiddeninfo (id)
-
document.getElementById (id) .style.display = "ไม่มี";
-
</script>
<ภาษาสคริปต์ = "JavaScript">
// 首页点击查看景点热门照片
ฟังก์ชั่น showpigdyt (obj2) {
var srcpath = obj2.name;
var id = obj2.id;
var obox = document.getElementById ("con");
var obg = document.getElementById ("bg");
var obot = document.getElementById ("ด้านล่าง");
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 标签 (集合)
// Alert (AIMG);
var i = inow = 0;
สำหรับ (i = 0; i <ali.length; i ++) {
Ali [i] .index = i;
Ali [i] .onclick = function () {
ด้วย (OFRAME.STYLE) {
display = "block", top = this.offsettop + "px", ซ้าย = this.offsetleft + "px", width = this.offsetWidth + "px", ความสูง = this.offSetheight + "px";
-
// Alert (SRCPath);
OFRAME.innerHtml = "<img id =/" " + id +"/"onMouseOver = 'upnext (นี่)' src =/" " + (srcpath) +"/"/>";
var oimg = Oframe.getElementsByTagname ("IMG") [0];
var iwidth;
var iheight;
if (oimg.width <600 || oimg.width == 0) {
iwidth = 600;
}อื่น{
iwidth = oimg.width;
-
if (oimg.width <425 || oimg.height == 0) {
iheight = 425;
}อื่น{
iheight = oimg.height;
-
var ileft = parseInt ((document.documentElement.ClientWidth / 2) - (iwidth / 2));
var itop = parseint ((document.documentelement.clientheight / 2) - (iheight / 2) - 50);
ด้วย (oimg.style) {
ความสูง = ความกว้าง = "100%";
-
startmove (Oframe, {ความทึบ: 100, ซ้าย: ileft, ด้านบน: itop, ความกว้าง: iwidth, ความสูง: iheight});
obg.style.display = "block";
obot.style.display = "block";
inow = this.index + 1;
-
-
document.onmousedown = function () {
กลับเท็จ;
-
abli [0] .onclick = function () {// 箭头向左事件触发
ถ้า (id == 0) {
id = Ali.length;
-
id--;
var pathimg = document.getElementById (id) .name;
OFRAME.innerhtml = "<img id =/" " + id +"/"onMouseOver = 'upnext (นี่)' src =/" " + pathimg +"/"width =/" 100%/"ความสูง =/" 100 % /" />";
-
abli [1] .onclick = function () {
Oframe.style.cursor = "Move";
OfRame.onMousedOwn = function (e) {
var oEvent = e || เหตุการณ์;
var x = oEvent.Clientx - OFRAME.OffSetLeft;
var y = oEvent.Clienty - OfRame.OffSettop;
document.onmousemove = function (e) {
var oEvent = e || เหตุการณ์;
var l = oEvent.Clientx - x;
var t = oEvent.Clienty - y;
ถ้า (l <0) {
l = 0;
} อื่น {
if (l> document.documentElement.ClientWidth - OfRame.OffSetWidth) {
l = document.documentElement.ClientWidth - OFRAME.OffSetWidth;
-
-
ถ้า (t <0) {
t = 0;
} อื่น {
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;
กลับเท็จ;
-
document.onmouseup = function () {
document.onmouseup = null;
document.onmousemove = null;
-
กลับเท็จ;
-
-
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 (นี่)' src =/" " + pathimg +"/"width =/" 100%/"ความสูง =/" 100 % /" />";
-
abli [3] .onclick = function () {// 箭头关闭事件触发
// Alert ("32" + Inow - 1);
// Alert ("32" + AIMG [Inow - 1] .OffSettop);
startmove (Oframe, {ความทึบ: 0, ซ้าย: AIMG [Inow - 1] .OffSetleft, Top: AIMG [Inow - 1] .OffSettop, ความกว้าง: 150, ความสูง: 100}, ฟังก์ชั่น () {
Oframe.style.display = "ไม่มี";
obg.style.display = "ไม่มี";
obot.style.display = "ไม่มี";
Oframe.onmousedown = null;
Oframe.style.cursor = "Auto";
-
-
-
ฟังก์ชั่น 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;
ถ้า (id == 0) {
leftid = Ali.length;
Rightid = 1;
} อื่นถ้า (id == (Ali.Length-1)) {
leftid = (Ali.Length-1);
Rightid = 0;
}อื่น{
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 (นี่)' src =/" " + ซ้าย +"/"width =/" 100%/"ความสูง =" 100% /" />";
var righturl = "<img id =/" " + rightid +"/"onMouseOver = 'upnext (นี่)' src =/" " + rightpath +"/"width =/" 100%/"ความสูง =" 100% /" />";
var width = bigimg.width;
ความสูง var = bigimg.height;
var imgurl = righturl;
var oframe = document.getElementById ("frame");
bigimg.onmousemove = function () {
if (event.offsetx <width/2) {
bigimg.style.cursor = 'url (images/arr_left.cur), auto';
imgurl = lefturl;
}อื่น{
bigimg.style.cursor = 'url (images/arr_right.cur), auto';
imgurl = righturl;
-
-
bigimg.onmouseup = function () {
if (event.offsetx <width/2) {
Oframe.innerhtml = lefturl;
}อื่น{
Oframe.innerhtml = Righturl;
-
-
-
ฟังก์ชั่น startmove (obj, json, onend) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
Domove (OBJ, JSON, Onend);
}, 30);
-
ฟังก์ชั่น getStyle (obj, attr) {
ส่งคืน obj.currentstyle? obj.currentstyle [attr]: getComputedstyle (obj, false) [attr];
-
ฟังก์ชั่น domove (obj, json, onend) {
var attr = "";
var bstop = true;
สำหรับ (attr ใน json) {
var icur = 0;
if (attr == "opacity") {
ICUR = PARSEINT (parsefloat (getStyle (obj, attr)) * 100);
} อื่น {
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 (ความทึบ:" + (icur + ispeed) + ")";
obj.style.Opacity = (iCur + ispeed) / 100;
} อื่น {
obj.style [attr] = icur + ispeed + "px";
-
-
ถ้า (bstop) {
ClearInterval (obj.timer);
ถ้า (onend) {
onend ();
-
-
-
</javascript>
3. 页面 div 布局:
复制代码代码如下:
<div id = "con">
<table cellpadding = "0" cellspacing = "0"
-
<C: เลือก>
<c: เมื่อ test = "$ {image_list emport}">
<tr style = "ความสูง: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</tr>
</c: เมื่อไหร่>
<C: มิฉะนั้น>
<%สำหรับ (int i = 0; i <3; i ++) {%>
<tr>
<c: foreach var = "image" items = "$ {image_list}"
เริ่มต้น = "<%= i * 5%>" end = "<%= (i + 1) * 5 - 1%>" varstatus = "strs">
<td align = "ซ้าย">
<ul> <li>
<a onclick = "aa (this.id)" id = "s $ {strs.index}">
<img id = "$ {strs.index}" style = "ความสูง: 116px; width: 116px" src = "< %= greateproperties.image_image_url %>/$ {image.imagepathsmall}" onclick = "showpigdyt {image.imagepathmiddle}) "name =" < %= greateproperties.image_image_url %>/$ {image.imagepathmiddle} "/> </a>
</li></ul>
<ul>
<li style = "line-height: 20px">
<อินพุต type = "ช่องทำเครื่องหมาย" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<C: เลือก>
<c: เมื่อ test = "$ {fn: length (image.imagename)> 6}">
<c: out value = "$ {fn: substring (image.imagename, 0, 6)} ... " />
</c: เมื่อไหร่>
<C: มิฉะนั้น>
<C: out value = "$ {image.imagename}" />
</c: มิฉะนั้น>
</c: เลือก>
</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: มิฉะนั้น>
</c: เลือก>
</table>
</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>