単純な実装ケースのページ画像フローティング左右のスライド効果

著者：Eve Cole 更新時間：2025-02-07 13:36:02

核心代码：

1.CSS：16Sucai.css

复制代码代码如下：

html、body {

高さ：100％;

マージン：0px;

パディング：0px;

}

{outsline：none;}

IMG {Border：0;}

a img {vertical-align：top;}

img.last {margin-right：0; }

。箱 {

幅：850px;

高さ：自動;

オーバーフロー：隠し;

背景：＃666;

マージントップ：10px;

マージン右：自動;

マージンボトム：10px;

マージン左：自動;

パディングトップ：10px;

パディング右：0;

パディングボトム：0;

パディング左：10px;

}

.boxul {

マージン：0px;

パディング：0px;

フロート：左;

リストスタイルタイプ：なし;

}

.boxli {

幅：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 0 -107px;

国境：1pxソリッド＃232323;

背景：＃444;

パディング：1px;

z-index：1;

表示：なし;

}

#bottomul {

幅：100％;

高さ：100％;

マージン：0px;

パディング：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;

}

＃フレーム {

背景：#fff;

パディング：3px;

位置：絶対;

z-index：2;

表示：なし;

フィルター：アルファ（不透明：0）;

不透明：0;

テキストアライグ：センター;

}

＃bottom1 {

幅：215px;

高さ：50px;

位置：絶対;

左：50％;

下：0px;

マージン：0 0 0 -107px;

国境：1pxソリッド＃232323;

背景：＃444;

パディング：1px;

z-index：1;

表示：なし;

}

＃bottom1ul {

幅：100％;

高さ：100％;

マージン：0px;

パディング：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;

パディング：3px;

位置：絶対;

z-index：2;

表示：なし;

フィルター：アルファ（不透明：0）;

不透明：0;

テキストアライグ：センター;

}

html、body {

高さ：100％;

マージン：0px;

フォントサイズ：12px;

}

.mydiv {

バックグラウンドカラー：＃ffcc66;

背景：url（../ images/loginbg.png）No-Repeat;

ボーダー：0pxソリッド＃F00;

Overflow-y：auto;

オーバーフローX：自動;

テキストアライグ：センター;

Line-Height：40px;

フォントサイズ：12px;

font-weight：bold;

Z-Index：999;

幅：434px;

高さ：238px;

左：50％;

トップ：50％;

マージン左：-200px！重要; / *ff ie7该值为本身宽的一半 */

マージントップ：-80px！重要; /*ff ie7该值为本身高的一半*/

マージントップ：0px;

位置：修正！重要。 /* ff ie7*/

位置：絶対; /*ie6*/

_top：expression（eval（document。compatmode&&

書類。 compatmode == 'css1compat'）？

DocumentLement。 scrolltop +（document。

DocumentLement。 clientheight-this。 offsetheight）/ 2：/*ie6*/

書類。体。 scrolltop +（document。body。

ClientHeight-これ。 clientheight）/ 2）; /*ie5 ie5.5*/

}

.mydiv1 {

バックグラウンドカラー：＃ffcc66;

ボーダー：0pxソリッド＃F00;

テキストアライグ：センター;

Line-Height：40px;

フォントサイズ：12px;

font-weight：bold;

Overflow-y：auto;

オーバーフローX：自動;

Z-Index：999;

幅：434px;

高さ：238px;

左：50％;

トップ：50％;

マージン左：-200px！重要; / *ff ie7该值为本身宽的一半 */

マージントップ：-80px！重要; /*ff ie7该值为本身高的一半*/

マージントップ：0px;

位置：修正！重要。 /* ff ie7*/

位置：絶対; /*ie6*/

_top：expression（eval（document。compatmode&&

書類。 compatmode == 'css1compat'）？

DocumentLement。 scrolltop +（document。

DocumentLement。 clientheight-this。 offsetheight）/ 2：/*ie6*/

書類。体。 scrolltop +（document。body。

ClientHeight-これ。 clientheight）/ 2）; /*ie5 ie5.5*/

}

.bg、.popiframe {

バックグラウンドカラー：＃666;

表示：なし;

幅：100％;

高さ：100％;

左：0;

上：0; /*ff ie7*/

フィルター：アルファ（不透明度= 50）; /*ie*/

不透明度：0.5; /*ff*/

z-index：1;

位置：修正！重要。 /*ff ie7*/

位置：絶対; /*ie6*/

_top：expression（eval（document。compatmode&&

書類。 compatmode == 'css1compat'）？

DocumentLement。 scrolltop +（document。

DocumentLement。 clientheight-this。 offsetheight）/ 2：/*ie6*/

書類。体。 scrolltop +（document。body。

ClientHeight-これ。 clientheight）/ 2）;

}

.popiframe {

フィルター：アルファ（不透明度= 0）; /*ie*/

不透明：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";

}

functiondidedinfo（id）

{

document.getElementById（id）.style.display = "none";

}

</script>

<スクリプト言語= "javascript">

//首页点击查看景点热门照片

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（ "BOTOME"）;

var abli = obot.getelementsbytagname（ "li"）;

var oframe = document.getElementById（ "frame"）;

// var ali = obox.getelementsbytagname（ "li"）;

var ali = $（ "li [class = 'conn']"）; //

// var aimg = obox.getelementsbytagname（ "img"）;

var aimg = $（ "img [class = 'conn']"）; //

// alert（aimg）;

var i = inow = 0;

for（i = 0; i <ali.length; i ++）{

ali [i] .index = i;

ali [i] .onclick = function（）{

（oframe.style）で{

display = "block"、top = this.offsettop + "px"、left = this.offsetleft + "px"、width = this.offsetwidth + "px"、height = this.OffSeigh + "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）;

with（oimg.style）{

height = width = "100％";

}

startmove（oframe、{ofacity：100、left：ileft、top：itop、width：iwidth、height：iheight}）;

obg.style.display = "block";

obot.style.display = "block";

inow = this.index + 1;

};

}

document.onmousedown = function（）{

falseを返します。

};

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 =/" " +"/"width =/" 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;

falseを返します。

};

document.onmouseup = function（）{

document.onmouseup = null;

document.onmousemove = null;

};

falseを返します。

};

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 =/" " +"/"width =/" height =/"100 ％ /" />";

};

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

// alert（ "32" + inow -1）;

// alert（ "32" + 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']"）; //

var id = bigimg.id;

Var Leftid;

var rightid;

if（id == 0）{

reftid = ali.length;

rightid = 1;

} else if（id ==（ali.length-1））{

reftid =（ali.length-1）;

rightid = 0;

}それ以外{

var reftid = id ++;

var rightid = id--;

}

var leftpath = document.getElementById（ - reftid）.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（ "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;

}

function 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];

}

function domove（obj、json、onend）{

var attr = "";

var bstop = true;

for（jsonのattr）{

var icur = 0;

if（attr == "ofacity"）{

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 == "ofacity"）{

obj.style.filter = "alpha（opacity：" +（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布局：

复制代码代码如下：

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

<c：chook>

<C：test = "$ {empty image_list}">の場合

暂时没有图片信息

</td>

</tr>

</c：>

<c：それ以外の場合>

<％for（int i = 0; i <3; i ++）{％>

<tr>

<c：foreach var = "image" items = "$ {image_list}"

begin = "<％= i * 5％>" end = "<％=（i + 1） * 5-1％>" varstatus = "strs">

<img id = "$ {strs.index}" style = "height：116px; width：116px" src = "<％= wholeproperties.image_image_url％>/$ {image.imagepathsmall}" onclick = "showpigdyt（this、$ {image.imagePathMiddle}） "name =" <％= wholeproperties.image_image_url％>/$ {image.imagePathmiddle} "/> </a>

</li> </ul>

<ul>

<入力型= "チェックボックス" id = "uppicid" name = "uppicid" value = "$ {image.id}" />

<c：chook>

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