Html,body {
height:100%;
margin:0px;
padding:0px;
}
a {outline:none;}
img{border:0;}
a img {vertical-align:top;}
A img.last {margin-right:0;}
. box {
width:850px;
Height:auto;
Overflow:hidden;
Background: #666;
margin-top:10px;
Margin-right:auto;
margin-bottom:10px;
Margin-left:auto;
padding-top:10px;
padding-right:0;
padding-bottom:0;
padding-left:10px;
}
. Box UL {
margin:0px;
padding:0px;
Float:left;
List-style-type:none;
}
. Box Li {
width:150px;
height:100px;
Float:left;
Cursor:pointer;
Display:inline;
margin:0 10px 10px 0;
border:5px solid #333;
}
#bg {
width:100%;
height:898px;
Position:absolute;
left:0px;
top:0px;
Background: #000;
Filter:alpha (OPACITY:50);
opacity:0.5;
Display:none;
}
#bg1 {
width:100%;
height:100%;
Position:absolute;
left:0px;
top:0px;
Background: #000;
Filter:alpha (OPACITY:50);
opacity:0.5;
Display:none;
}
#bottom {
width:215px;
height:50px;
Position:absolute;
left:50%;
bottom:0px;
margin:0 0 0-107px;
border:1px solid #232323;
Background: #444;
padding:1px;
Z-index:1;
Display:none;
}
#bottom ul {
width:100%;
height:100%;
margin:0px;
padding:0px;
List-style-type:none;
Background: #000;
}
#bottom Li {
Background:url (.. /images/ico.jpg) No-repeat;
Float:left;
Display:inline;
margin:8px 0 0 18px;
Cursor:pointer;
}
#bottom Li.prev {
width:30px;
height:33px;
background-position:0 0;
}
#bottom Li.next {
width:30px;
height:33px;
Background-position: -35px 0;
}
#bottom li.img {
width:30px;
height:33px;
Background-position: -106px 0;
}
#bottom Li.close {
width:31px;
height:33px;
Background-position: -70px 0;
}
#frame {
Background: #fff;
padding:3px;
Position:absolute;
Z-index:2;
Display:none;
Filter:alpha (opacity:0);
opacity:0;
Text-align:center;
}
#bottom1 {
width:215px;
height:50px;
Position:absolute;
left:50%;
bottom:0px;
margin:0 0 0-107px;
border:1px solid #232323;
Background: #444;
padding:1px;
Z-index:1;
Display:none;
}
#bottom1 ul {
width:100%;
height:100%;
margin:0px;
padding:0px;
List-style-type:none;
Background: #000;
}
#bottom1 Li {
Background:url (.. /.. /images/ico.jpg) No-repeat;
Float:left;
Display:inline;
margin:8px 0 0 18px;
Cursor:pointer;
}
#bottom1 Li.prev {
width:30px;
height:33px;
background-position:0 0;
}
#bottom1 Li.next {
width:30px;
height:33px;
Background-position: -35px 0;
}
#bottom1 li.img {
width:30px;
height:33px;
Background-position: -106px 0;
}
#bottom1 Li.close {
width:31px;
height:33px;
Background-position: -70px 0;
}
#frame1 {
Background: #fff;
padding:3px;
Position:absolute;
Z-index:2;
Display:none;
Filter:alpha (opacity:0);
opacity:0;
Text-align:center;
}
/
Html,body {
height:100%;
margin:0px;
font-size:12px;
}
. mydiv {
Background-color: #FFCC66;
Background:url (.. /images/loginbg.png) No-repeat;
border:0px solid #f00;
Overflow-y:auto;
Overflow-x:auto;
Text-align:center;
line-height:40px;
font-size:12px;
Font-weight:bold;
z-index:999;
width:434px;
height:238px;
left:50%;
top:50%;
Margin-left: -200px!important; /*FF IE7 This value is half of the width of itself * *
Margin-top: -80px!important; /*ff IE7 The value is half the height of itself * *
margin-top:0px;
Position:fixed!important; /* FF ie7*/
Position:absolute; /*ie6*/
_top:expression (eval. Compatmode &&
Document. Compatmode = = ' Css1compat ')?
DocumentElement. ScrollTop + (document.
DocumentElement. Clientheight-this. offsetheight)/2:/*ie6*/
Document. Body. ScrollTop + (document. body.
Clientheight-this. clientheight)/2); /*IE5 ie5.5*/
}
. mydiv1 {
Background-color: #FFCC66;
border:0px solid #f00;
Text-align:center;
line-height:40px;
font-size:12px;
Font-weight:bold;
Overflow-y:auto;
Overflow-x:auto;
z-index:999;
width:434px;
height:238px;
left:50%;
top:50%;
Margin-left: -200px!important; /*FF IE7 This value is half of the width of itself * *
Margin-top: -80px!important; /*ff IE7 The value is half the height of itself * *
margin-top:0px;
Position:fixed!important; /* FF ie7*/
Position:absolute; /*ie6*/
_top:expression (eval. Compatmode &&
Document. Compatmode = = ' Css1compat ')?
DocumentElement. ScrollTop + (document.
DocumentElement. Clientheight-this. offsetheight)/2:/*ie6*/
Document. Body. ScrollTop + (document. body.
Clientheight-this. clientheight)/2); /*IE5 ie5.5*/
}
. bg,.popiframe {
Background-color: #666;
Display:none;
width:100%;
height:100%;
left:0;
top:0; /*ff ie7*/
Filter:alpha (opacity = 50); /*ie*/
opacity:0.5; /*ff*/
Z-index:1;
Position:fixed!important; /*ff ie7*/
Position:absolute; /*ie6*/
_top:expression (eval. Compatmode &&
Document. Compatmode = = ' Css1compat ')?
DocumentElement. ScrollTop + (document.
DocumentElement. Clientheight-this. offsetheight)/2:/*ie6*/
Document. Body. ScrollTop + (document. body.
Clientheight-this. clientheight)/2);
}
. popiframe {
Filter:alpha (opacity = 0); /*ie*/
opacity:0; /*ff*/
}
<link rel= "stylesheet" type= "Text/css" href= "<%=path%>/css/16sucai.css"/>
<script type= "Text/javascript" >
function AA (ID) {
var ID = id.substring (1,2);
var obj2 = document.getElementById (ID);
Showpigdyt (OBJ2);
}
function Showinfo (ID)
{
document.getElementById (id). style.display = "block";
}
function Hiddeninfo (ID)
{
document.getElementById (id). style.display = "None";
}
</script>
<script language= "JavaScript" >
Home Click to view popular photos
function 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 ')")//Get all a tag's Li tags (set)
var aimg = obox.getelementsbytagname ("img");
var aimg=$ ("img[class= ' conn ')")//Get the IMG tag (set) in all a tags
alert (AIMG);
var i = Inow = 0;
for (i = 0; i < ali.length; i++) {
Ali[i].index = i;
Ali[i].onclick = function () {
With (Oframe.style) {
display = ' block ', top = this.offsettop + ' px ', left = this.offsetleft + ' px ', width = this.offsetwidth + ' px ', height = t His.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 < | | oimg.width = 0) {
iwidth = 600;
}else{
iwidth = Oimg.width;
}
if (Oimg.width < 425 | | oimg.height = 0) {
Iheight = 425;
}else{
Iheight = Oimg.height;
}
var ileft = parseint ((DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/2)-(IWIDTH/2));
var itop = parseint (DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT/2)-(IHEIGHT/2)-50);
With (Oimg.style) {
Height = width = "100%";
}
Startmove (Oframe, {opacity:100, Left:ileft, Top:itop, Width:iwidth, height:iheight});
OBg.style.display = "block";
OBot.style.display = "block";
Inow = This.index + 1;
};
}
Document.onmousedown = function () {
return false;
};
Abli[0].onclick = function () {//arrow to left Event trigger
if (ID = = 0) {
ID = Ali.length;
}
id--;
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 | | Event
var X = Oevent.clientx-oframe.offsetleft;
var Y = oevent.clienty-oframe.offsettop;
Document.onmousemove = function (e) {
var oevent = e | | Event
var L = oevent.clientx-x;
var T = oevent.clienty-y;
if (L < 0) {
L = 0;
} else {
if (L > Document.documentelement.clientwidth-oframe.offsetwidth) {
L = Document.documentelement.clientwidth-oframe.offsetwidth;
}
}
if (T < 0) {
T = 0;
} else {
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;
return false;
};
Document.onmouseup = function () {
Document.onmouseup = null;
Document.onmousemove = null;
};
return false;
};
};
Abli[2].onclick = function () {//arrow to right Event trigger
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%\ "height=\" 1 00%\ "/>";
};
Abli[3].onclick = function () {//Arrow Shutdown Event Trigger
Alert ("+" + iNow-1);
Alert ("+" + aimg[inow-1].offsettop);
Startmove (Oframe, {opacity:0, Left:aimg[inow-1].offsetleft, Top:aimg[inow-1].offsettop, width:150, height: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 ')")//Get all a tag's Li tag
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;
}else{
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=\" 1 00%\ "/>";
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 (images/arr_left.cur), auto ';
Imgurl = Lefturl;
}else{
bigimg.style.cursor = ' url (images/arr_right.cur), auto ';
Imgurl = Righturl;
}
}
Bigimg.onmouseup=function () {
if (Event.offsetx < WIDTH/2) {
oframe.innerhtml = Lefturl;
}else{
oframe.innerhtml = Righturl;
}
}
}
function Startmove (obj, JSON, onend) {
Clearinterval (Obj.timer);
Obj.timer = setinterval (function () {
Domove (obj, JSON, onend);
}, 30);
}
function GetStyle (obj, attr) {
Return Obj.currentstyle? OBJ.CURRENTSTYLE[ATTR]: getComputedStyle (obj, false) [attr];
}
function Domove (obj, JSON, onend) {
var attr = "";
var bstop = true;
For (attr in JSON) {
var icur = 0;
if (attr = = "opacity") {
Icur = parseint (parsefloat (GetStyle (obj, attr)) * 100);
} else {
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;
} else {
OBJ.STYLE[ATTR] = icur + ispeed + "px";
}
}
if (bstop) {
Clearinterval (Obj.timer);
if (onend) {
OnEnd ();
}
}
}
</javascript>