Seite Bild schwebende linke und rechte Sliding -Wirkung einfacher Implementierungsfälle

核心代码 ：

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>