페이지 사진 부동 왼쪽 및 오른쪽 슬라이딩 효과 간단한 구현 케이스의 효과

核心代码 ：

1.CSS ： 16SUCAI.CSS

复制代码代码如下 :

html, body {

높이 : 100%;

여백 : 0px;

패딩 : 0px;

}

a {개요 : 없음;}

img {border : 0;}

IMG {수직-정상 : 상단;}

img.last {마진-오른쪽 : 0; }

.상자 {

너비 : 850px;

높이 : 자동;

오버플로 : 숨겨진;

배경 : #666;

마진-탑 : 10px;

마진 오른쪽 : 자동;

마진 바닥 : 10px;

마진 좌파 : 자동;

패딩 탑 : 10px;

패딩-오른쪽 : 0;

패딩 바닥 : 0;

왼쪽 패딩 : 10px;

}

.box ul {

여백 : 0px;

패딩 : 0px;

플로트 : 왼쪽;

목록 스타일 유형 : 없음;

}

.box li {

너비 : 150px;

높이 : 100px;

플로트 : 왼쪽;

커서 : 포인터;

디스플레이 : 인라인;

여백 : 0 10px 10px 0;

국경 : 5px 고체 #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 -107px;

국경 : 1px 솔리드 #232323;

배경 : #444;

패딩 : 1px;

z- 인덱스 : 1;

디스플레이 : 없음;

}

#bottom ul {

너비 : 100%;

높이 : 100%;

여백 : 0px;

패딩 : 0px;

목록 스타일 유형 : 없음;

배경 : #000;

}

#bottom li {

배경 : url (../ images/ico.jpg) no-repeat;

플로트 : 왼쪽;

디스플레이 : 인라인;

여백 : 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;

}

#액자 {

배경 : #fff;

패딩 : 3px;

위치 : 절대;

z- 인덱스 : 2;

디스플레이 : 없음;

필터 : 알파 (불투명도 : 0);

불투명도 : 0;

텍스트 정렬 : 센터;

}

#바닥 1 {

너비 : 215px;

높이 : 50px;

위치 : 절대;

왼쪽 : 50%;

하단 : 0px;

여백 : 0 0 -107px;

국경 : 1px 솔리드 #232323;

배경 : #444;

패딩 : 1px;

z- 인덱스 : 1;

디스플레이 : 없음;

}

#Bottom1 ul {

너비 : 100%;

높이 : 100%;

여백 : 0px;

패딩 : 0px;

목록 스타일 유형 : 없음;

배경 : #000;

}

#Bottom1 Li {

배경 : URL (../../ images/ico.jpg) no-repeat;

플로트 : 왼쪽;

디스플레이 : 인라인;

여백 : 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;

패딩 : 3px;

위치 : 절대;

z- 인덱스 : 2;

디스플레이 : 없음;

필터 : 알파 (불투명도 : 0);

불투명도 : 0;

텍스트 정렬 : 센터;

}

/

html, body {

높이 : 100%;

여백 : 0px;

글꼴 크기 : 12px;

}

.mydiv {

배경색 : #ffcc66;

배경 : url (../ images/loginbg.png) no-repeat;

테두리 : 0px 솔리드 #f00;

오버플로 -Y : 자동;

오버 플로우 -X : 자동;

텍스트 정렬 : 센터;

라인 높이 : 40px;

글꼴 크기 : 12px;

글꼴 중량 : 대담한;

Z- 인덱스 : 999;

너비 : 434px;

높이 : 238px;

왼쪽 : 50%;

상단 : 50%;

마진 왼쪽 : -200px! 중요; / *ff ie7 该值为本身宽的一半 */

마진 -탑 : -80px! 중요; /*ff ie7 该值为本身高的一半*/

마진-탑 : 0px;

위치 : 고정! 중요; /* ff ie7*/

위치 : 절대; /*IE6*/

_top : expression (Eval (document. compatmode &&

문서 . compatMode == 'CSS1compat')?

DocumentElement. ScrollTop + (문서.

DocumentElement. ClientHeight-this. offestheight)/ 2 :/*ie6*/

문서 . 몸 . ScrollTop + (문서. 본문.

클라이언트 - 이것 - 이것. ClientHeight)/ 2); /*IE5 IE5.5*/

}

.mydiv1 {

배경색 : #ffcc66;

테두리 : 0px 솔리드 #f00;

텍스트 정렬 : 센터;

라인 높이 : 40px;

글꼴 크기 : 12px;

글꼴 중량 : 대담한;

오버플로 -Y : 자동;

오버 플로우 -X : 자동;

Z- 인덱스 : 999;

너비 : 434px;

높이 : 238px;

왼쪽 : 50%;

상단 : 50%;

마진 왼쪽 : -200px! 중요; / *ff ie7 该值为本身宽的一半 */

마진 -탑 : -80px! 중요; /*ff ie7 该值为本身高的一半*/

마진-탑 : 0px;

위치 : 고정! 중요; /* ff ie7*/

위치 : 절대; /*IE6*/

_top : expression (Eval (document. compatmode &&

문서 . compatMode == 'CSS1compat')?

DocumentElement. ScrollTop + (문서.

DocumentElement. ClientHeight-this. offestheight)/ 2 :/*ie6*/

문서 . 몸 . ScrollTop + (문서. 본문.

클라이언트 - 이것 - 이것. ClientHeight)/ 2); /*IE5 IE5.5*/

}

.bg, .popiframe {

배경색 : #666;

디스플레이 : 없음;

너비 : 100%;

높이 : 100%;

왼쪽 : 0;

상단 : 0; /*ff ie7*/

필터 : 알파 (불투명도 = 50); /*즉*/

불투명도 : 0.5; /*ff*/

z- 인덱스 : 1;

위치 : 고정! 중요; /*ff ie7*/

위치 : 절대; /*IE6*/

_top : expression (Eval (document. compatmode &&

문서 . compatMode == 'CSS1compat')?

DocumentElement. ScrollTop + (문서.

DocumentElement. ClientHeight-this. offestheight)/ 2 :/*ie6*/

문서 . 몸 . ScrollTop + (문서. 본문.

클라이언트 - 이것 - 이것. 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 = "none";

}

</스크립트>

<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 ( "하단");

var abli = obot.getElementsByTagName ( "li");

var oframe = document.getElementById ( "프레임");

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

for (i = 0; i <ali.length; i ++) {

ali [i] .index = i;

ali [i] .onclick = function () {

with (oframe.style) {

display = "block", top = this.offsettop + "px", 왼쪽 = 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, Top : Itop, 너비 : iwidth, 높이 : iheight});

obg.style.display = "블록";

obot.style.display = "블록";

inow = this.index + 1;

};

}

document.onmousedown = function () {

거짓을 반환합니다.

};

abli [0] .onclick = function () {// 箭头向左事件触发

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 || 이벤트;

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;

}

}

if (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 (this)'src =/" " + pathimg +"/"width =/"100%/"height =/"100 % /" />";

};

abli [3] .onclick = function () {// 箭头关闭事件触发

// alert ( "32" + inow -1);

// ALERT ( "32" + aimg [inow -1] .OffSetTop);

startMove (oframe, {불투명도 : 0, 왼쪽 : aimg [inow -1] .OffSetLeft, 상단 : aimg [inow -1] .OffSetTop, 너비 : 150, 높이 : 100}, function () {

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 왼쪽;

var 권리;

if (id == 0) {

leftid = ali.length;

rightid = 1;

} else if (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.height;

var imgurl = RightUrl;

var oframe = document.getElementById ( "프레임");

bigimg.onmouseMove = function () {

if (event.offsetx <width/2) {

bigimg.style.cursor = 'URL (images/arr_left.cur), auto';

imgurl = 왼쪽;

}또 다른{

bigimg.style.cursor = 'url (images/arr_right.cur), auto';

imgurl = 오른쪽;

}

}

bigimg.onmouseup = function () {

if (event.offsetx <width/2) {

oframe.innerhtml = 왼쪽;

}또 다른{

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;

for (json in att) {

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 = false;

}

if (attr == "불투명도") {

obj.style.filter = "Alpha (불투명 :" + (icur + ispeed) + ");

obj.style.opacity = (icur + ispeed) / 100;

} 또 다른 {

obj.style [attr] = icur + ispeed + "px";

}

}

if (bstop) {

ClearInterval (obj.timer);

if (onend) {

onend ();

}

}

}

</javaScript>

3. ： div 布局 ：

复制代码代码如下 :

<div id = "con">

<table cellPadding = "0"CellSpacing = "0"

>

<C : 선택하십시오

<c : test = "$ {empty image_list}">

<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 = "left">

<ul> <li>

<a onclick = "aa (this.id)"id = "s $ {strs.index}">

<img id = "$ {strs.index}"style = "높이 : 116px; 너비 : 116px"src = "< %= wholeproperties.image_image_url %>/$ {image.imagepathsmall}"onclick = "showpigdyt (this, $ {image.imagepathmiddle}) "name ="< %= wholeproperties.image_image_url %>/$ {image.imagepathmiddle} "/> </a>

</li> </ul>

<ul>

<li style = "line-height : 20px">

<입력 유형 = "checkbox"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 : 선택하십시오

</테이블>

</div>

<div> </div>

<div> </div>

<div id = "bg"> </div>

<div id = "하단">

<ul>

<li> </li>

<li> </li>

<li> </li>

<li> </li>

</ul>

</div>

<div id = "프레임"> </div>