รูปภาพหน้าลอยซ้ายและขวาเอฟเฟกต์ของกรณีการใช้งานง่าย ๆ

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-07 13:36:02

核心代码：

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 事件：

复制代码代码如下:

ฟังก์ชั่น 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 布局：

复制代码代码如下:

<table cellpadding = "0" cellspacing = "0"

<C: เลือก>

<c: เมื่อ test = "$ {image_list emport}">

暂时没有图片信息

</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">

<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>

<อินพุต 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"> 图片大小： $ {image.imagesize} </li>

</ul>

</td>

</c: foreach>

</tr>

</c: มิฉะนั้น>

</c: เลือก>

</table>

</div>

<ul>

</ul>

</div>