： ：
1.CSS ： 16SUCAI.CSS
复制代码代码如下:
HTML ، الجسم {
الارتفاع: 100 ٪
الهامش: 0px ؛
الحشو: 0px ؛
}
A {Outline: None ؛}
img {الحدود: 0 ؛}
A IMG {alsal-align: TOP ؛}
A img.last {margin-right: 0 ؛ }
.صندوق {
العرض: 850px ؛
الارتفاع: السيارات ؛
الفائض: مخفي.
الخلفية: #666 ؛
الهامش: 10 بكسل ؛
يمين الهامش: السيارات ؛
هامش القاع: 10 بكسل ؛
الهامش اليساري: السيارات ؛
الحشو أعلى: 10 بكسل ؛
حشو اليمين: 0 ؛
حشوة القاع: 0 ؛
حشو اليسار: 10 بكسل ؛
}
.box ul {
الهامش: 0px ؛
الحشو: 0px ؛
تعويم: اليسار.
نوع القائمة: لا شيء ؛
}
.box li {
العرض: 150 بكسل ؛
الارتفاع: 100px ؛
تعويم: اليسار.
المؤشر: مؤشر.
العرض: مضمّن ؛
الهامش: 0 10px 10px 0 ؛
الحدود: 5 بكسل Solid #333 ؛
}
#BG {
العرض: 100 ٪ ؛
الارتفاع: 898 بكسل ؛
الموقف: مطلق ؛
اليسار: 0px ؛
أعلى: 0px ؛
الخلفية: #000 ؛
مرشح: ألفا (التعتيم: 50) ؛
العتامة: 0.5 ؛
العرض: لا شيء ؛
}
#BG1 {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
الموقف: مطلق ؛
اليسار: 0px ؛
أعلى: 0px ؛
الخلفية: #000 ؛
مرشح: ألفا (التعتيم: 50) ؛
العتامة: 0.5 ؛
العرض: لا شيء ؛
}
#قاع {
العرض: 215 بكسل ؛
الارتفاع: 50 بكسل ؛
الموقف: مطلق ؛
اليسار: 50 ٪ ؛
أسفل: 0px ؛
الهامش: 0 0 -107px ؛
الحدود: 1 بكسل الصلبة #232323 ؛
الخلفية: #444 ؛
الحشو: 1px ؛
Z-index: 1 ؛
العرض: لا شيء ؛
}
#bottom ul {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
الهامش: 0px ؛
الحشو: 0px ؛
نوع القائمة: لا شيء ؛
الخلفية: #000 ؛
}
#bottom li {
الخلفية: url (../ images/ico.jpg) no-repeat ؛
تعويم: اليسار.
العرض: مضمّن ؛
الهامش: 8px 0 0 18px ؛
المؤشر: مؤشر.
}
#bottom li.prev {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: 0 0 ؛
}
#bottom li.next {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: -35px 0 ؛
}
#bottom li.img {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الوضع: -106px 0 ؛
}
#bottom li.close {
العرض: 31 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: -70px 0 ؛
}
#إطار {
الخلفية: #fff ؛
الحشو: 3px ؛
الموقف: مطلق ؛
Z-index: 2 ؛
العرض: لا شيء ؛
مرشح: ألفا (التعتيم: 0) ؛
العتامة: 0 ؛
محاذاة النص: المركز ؛
}
#Bottom1 {
العرض: 215 بكسل ؛
الارتفاع: 50 بكسل ؛
الموقف: مطلق ؛
اليسار: 50 ٪ ؛
أسفل: 0px ؛
الهامش: 0 0 -107px ؛
الحدود: 1 بكسل الصلبة #232323 ؛
الخلفية: #444 ؛
الحشو: 1px ؛
Z-index: 1 ؛
العرض: لا شيء ؛
}
#bottom1 ul {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
الهامش: 0px ؛
الحشو: 0px ؛
نوع القائمة: لا شيء ؛
الخلفية: #000 ؛
}
#bottom1 li {
الخلفية: url (../../ images/ico.jpg) no-repeat ؛
تعويم: اليسار.
العرض: مضمّن ؛
الهامش: 8px 0 0 18px ؛
المؤشر: مؤشر.
}
#bottom1 li.prev {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: 0 0 ؛
}
#Bottom1 li.next {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: -35px 0 ؛
}
#bottom1 li.img {
العرض: 30 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الوضع: -106px 0 ؛
}
#bottom1 li.close {
العرض: 31 بكسل ؛
الارتفاع: 33 بكسل ؛
خلفية الموضع: -70px 0 ؛
}
#Frame1 {
الخلفية: #fff ؛
الحشو: 3px ؛
الموقف: مطلق ؛
Z-index: 2 ؛
العرض: لا شيء ؛
مرشح: ألفا (التعتيم: 0) ؛
العتامة: 0 ؛
محاذاة النص: المركز ؛
}
/
HTML ، الجسم {
الارتفاع: 100 ٪
الهامش: 0px ؛
حجم الخط: 12 بكسل ؛
}
.mydiv {
لون الخلفية: #ffcc66 ؛
الخلفية: url (../ images/loginbg.png) no-repeat ؛
الحدود: 0px الصلبة #F00 ؛
فائض y: Auto ؛
Overflow-X: Auto ؛
محاذاة النص: المركز ؛
رفع الخط: 40 بكسل ؛
حجم الخط: 12 بكسل ؛
خط الرصيف: جريئة ؛
Z-index: 999 ؛
العرض: 434px ؛
الارتفاع: 238 بكسل ؛
اليسار: 50 ٪ ؛
أعلى: 50 ٪ ؛
الهامش اليساري: -200px! مهم ؛ / *ff ie7 该值为本身宽的一半 */
الهامش: -80px! مهم ؛ /*ff ie7 该值为本身高的一半*/
الهامش: 0px ؛
الموقف: ثابت! مهم ؛ /* ff ie7*/
الموقف: مطلق ؛ /*ie6*/
_top: التعبير (eval (المستند. compatmode &&
وثيقة . compatmode == 'css1compat')؟
وثيقة. Scrolltop + (وثيقة.
وثيقة. العميل-هذا. Offsetheight)/ 2:/*ie6*/
وثيقة . جسم . Scrolltop + (وثيقة. الجسم.
ClientHeight - هذا. ClientHeight)/ 2) ؛ /*ie5 ie5.5*/
}
.mydiv1 {
لون الخلفية: #ffcc66 ؛
الحدود: 0px الصلبة #F00 ؛
محاذاة النص: المركز ؛
رفع الخط: 40 بكسل ؛
حجم الخط: 12 بكسل ؛
خط الرصيف: جريئة ؛
فائض y: Auto ؛
Overflow-X: Auto ؛
Z-index: 999 ؛
العرض: 434px ؛
الارتفاع: 238 بكسل ؛
اليسار: 50 ٪ ؛
أعلى: 50 ٪ ؛
الهامش اليساري: -200px! مهم ؛ / *ff ie7 该值为本身宽的一半 */
الهامش: -80px! مهم ؛ /*ff ie7 该值为本身高的一半*/
الهامش: 0px ؛
الموقف: ثابت! مهم ؛ /* ff ie7*/
الموقف: مطلق ؛ /*ie6*/
_top: التعبير (eval (المستند. compatmode &&
وثيقة . compatmode == 'css1compat')؟
وثيقة. Scrolltop + (وثيقة.
وثيقة. العميل-هذا. 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')؟
وثيقة. Scrolltop + (وثيقة.
وثيقة. العميل-هذا. 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 (معرف)
{
document.getElementById (id) .style.display = "block" ؛
}
وظيفة hiddeninfo (معرف)
{
document.getElementById (id) .style.display = "none" ؛
}
</script>
<script language = "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 ("Bottom") ؛
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 ++) {
علي [i] .index = i ؛
علي [i] .onclick = function () {
مع (Oframe.style) {
display = "block" ، top = this.offsettop + "px" ، left = this.offSetLeft + "px" ، width = this.offSetWidth + "px" ، height = this.offsetheight + "px" ؛
}
// ALERT (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 ؛
}آخر{
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 () {// 箭头向左事件触发
if (id == 0) {
id = ali.length ؛
}
بطاقة تعريف--؛
var pathimg = document.getElementById (id) .Name ؛
OFRAME.INNERHTML = "<img id =/" " + id +"/"onMouseover = 'upnext (this)' src =/" " + pathimg +"/"width =/" 100 ٪/"height =/" 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 ؛
if (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)) {
معرف = -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 () {// 箭头关闭事件触发
// ALERT ("32" + inow - 1) ؛
// ALERT ("32" + AIMG [inow - 1] .OffSetTop) ؛
startMove (Oframe ، {opacity: 0 ، اليسار: AIMG [inow - 1] .offsetLeft ، TOP: AIMG [inow - 1]
Oframe.Style.Display = "none" ؛
obg.style.display = "none" ؛
obot.style.display = "none" ؛
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.
if (id == 0) {
LeftId = ali.length ؛
يمين = 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 (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 height = bigimg.hight ؛
var imgurl = righturl ؛
var Oframe = document.getElementById ("Frame") ؛
bigimg.onmousemove = function () {
if (event.offsetx <width/2) {
bigimg.style.cursor = 'url (الصور/arr_left.cur) ، auto' ؛
imgurl = Lefturl ؛
}آخر{
bigimg.style.cursor = 'url (الصور/arr_right.cur) ، auto' ؛
imgurl = righturl ؛
}
}
bigimg.onmouseup = function () {
if (event.offsetx <width/2) {
Oframe.innerhtml = Lefturl ؛
}آخر{
Oframe.innerhtml = righturl ؛
}
}
}
وظيفة StartMove (OBJ ، JSON ، بصل) {
ClearInterval (Obj.timer) ؛
obj.timer = setInterval (function () {
DOMOVE (OBJ ، JSON ، BENEND) ؛
} ، 30) ؛
}
وظيفة getStyle (obj ، attr) {
إرجاع OBJ.CurrentStyle؟ OBJ.CurrentStyle [attr]: getComputedStyle (obj ، false) [attr] ؛
}
وظيفة DOMOVE (OBJ ، JSON ، بصل) {
var attr = "" ؛
var bstop = true ؛
لـ (attr in json) {
var icur = 0 ؛
if (attr == "عتامة") {
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 = خطأ ؛
}
if (attr == "عتامة") {
obj.style.filter = "alpha (عتامة:" + (icur + isPeed) + ")" ؛
OBJ.STYLE.Opacity = (ICUR + ISPEED) / 100 ؛
} آخر {
obj.style [attr] = icur + isPeed + "px" ؛
}
}
إذا (bstop) {
ClearInterval (Obj.timer) ؛
إذا (بصل) {
بصل () ؛
}
}
}
</javaScript>
3. 页面 div ： ：
复制代码代码如下:
<div id = "con">
<table cellpadding = "0" cellspacing = "0"
>
<ج: اختر>
<C: عند اختبار = "$ {فارغة image_list}">
<tr style = "الارتفاع: 20px">
<td colspan = "2">
暂时没有图片信息
</td>
</r>
</c: متى>
<ج: خلاف ذلك>
<٪ لـ (int i = 0 ؛ i <3 ؛ i ++) {٪>
<tr>
<c: foreach var = "Image" عناصر = "$ {image_list}"
begin = "<٪ = i * 5 ٪>" end = "<٪ = (i + 1) * 5 - 1 ٪>" varstatus = "strs">
<td align = "left">
<ul> <li>
<a onClick = "aa (this.id)" id = "s $ {strs.index}">
<img id = "$ {Strs.Index}" style = "الارتفاع: 116px ؛ العرض: 116px" src = "<٪ = heoleproperties.image_image_url ٪>/$ {image.imagepathsmall}" onClick = "showpigdyt (هذا ، $ ، $ ، {image.imageathmiddle}) "name =" <٪ = heoleproperties.image_image_url ٪>/$ {image.imageathmiddle} "/> </a>
</li> </ul>
<ul>
<li style = "Line-Height: 20px">
<type type = "checkbox" id = "uppicid" name = "uppicid" value = "$ {image.id}" />
<ج: اختر>
<c: عندما test = "$ {fn: length (image.imagename)> 6}">
<c: Out value = "$ {fn: substring (image.imagename ، 0 ، 6)} ..." />
</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>
</r>
<٪} ٪>
</c: خلاف ذلك>
</c: اختر>
</table>
</div>
<viv> </viv>
<viv> </viv>
<div id = "bg"> </viv>
<div id = "bottom">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id = "frame"> </viv>