一个简单的页面图片浮动和左滑动效果的例子
核心代码：1。CSS：16sucai.css
复制代码代码如下所示：
HTML，体{
身高：100%；
保证金：0px；
填料：0px；
}
{大纲：无；}
img {边界：0；}
一个img {垂直对齐：顶；}
一个img.last {保证金：0；}
{。箱
宽度：850px；
高度：自动；
溢出：隐藏；
背景：# 666；
边距：10px；
保证金：汽车；
边距：10px；
左缘：自动；
10px垫上；
填充权：0；
填充底：0；
左：10px填充；
}
框{ {
保证金：0px；
填料：0px；
浮点数：左；
列表样式类型：无；
}
盒子李{
宽度：150px；
身高：100px；
浮点数：左；
光标：指针；
显示：内联；
保证金：0 10px 10px 0；
边境：5px固体# 333；
}
{ # BG
宽度：100%；
身高：898px；
位置：绝对；
左：0px；
上图：0px；
背景：# 000；
滤镜：alpha（不透明度：50）；
不透明性：0.5；
显示：无；
}
{ # BG1
宽度：100%；
身高：100%；
位置：绝对；
左：0px；
上图：0px；
背景：# 000；
滤镜：alpha（不透明度：50）；
不透明性：0.5；
显示：无；
}
{ #底
宽度：215px；
身高：50px；
位置：绝对；
左：50%；
底部：0px；
保证金：000 107px；
边境：1px solid # 232323；
背景：# 444；
填料：1px；
Z指数：1；
显示：无；
}
#底UL {
宽度：100%；
身高：100%；
保证金：0px；
填料：0px；
列表样式类型：无；
背景：# 000；
}
#底李{
背景：URL（。 /图像/图标。JPG）不重复；
浮点数：左；
显示：内联；
保证金：00 18px 8px；
光标：指针；
}
#底{ li.prev
宽度：30px；
身高：33px；
背景位置：00；
}
#底{ li.next
宽度：30px；
身高：33px；
背景位置：- 35px 0；
}
#底{ li.img
宽度：30px；
身高：33px；
背景位置：- 106px 0；
}
#底{ li.close
宽度：31px；
身高：33px；
背景位置：- 70px 0；
}
{ #框架
背景：# FFF；
填料：3px；
位置：绝对；
Z指数：2；
显示：无；
滤镜：alpha（不透明度：0）；
不透明性：0；
文本对齐：中心；
}
{ # bottom1
宽度：215px；
身高：50px；
位置：绝对；
左：50%；
底部：0px；
保证金：000 107px；
边境：1px solid # 232323；
背景：# 444；
填料：1px；
Z指数：1；
显示：无；
}
# bottom1 UL {
宽度：100%；
身高：100%；
保证金：0px；
填料：0px；
列表样式类型：无；
背景：# 000；
}
# bottom1李{
背景：URL（。 / / /图像，ICO图片）不重复；
浮点数：左；
显示：内联；
保证金：00 18px 8px；
光标：指针；
}
# bottom1 { li.prev
宽度：30px；
身高：33px；
背景位置：00；
}
# 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；
显示：无；
滤镜：alpha（不透明度：0）；
不透明性：0；
文本对齐：中心；
}
/
HTML，体{
身高：100%；
保证金：0px；
字体大小：12px；
}
{。mydiv
背景颜色：# ffcc66；
背景：URL（。 / / loginbg图像，PNG）不重复；
边境：0px固体# F00；
overflow-y：汽车；
overflow-x：汽车；
文本对齐：中心；
行高：40px；
字体大小：12px；
字体粗细：粗体；
Z指数：999；
宽度：434px；
身高：238px；
左：50%；
顶部：50%；
margin-left: - 200px！重要的 / * FF IE7；该值的一半宽本身。
边距：- 80px！重要的 / * FF IE7；此值一半的高度。
边距：0px；
位置：固定重要的FF IE7 * / / *！
位置： / * IE6绝对；* /
_top：表达（eval（文件。compatmode）
文件compatmode = = 'css1compat）。
文档元素}。scrollTop +（文件。
文档元素}。自己的这。offsetheight） / 2： / * * / IE6
文件。体。scrollTop +（文件。体。
自己的这。自己） / 2）； / * * / IE5 IE5.5
}
{。mydiv1
背景颜色：# ffcc66；
边境：0px固体# F00；
文本对齐：中心；
行高：40px；
字体大小：12px；
字体粗细：粗体；
overflow-y：汽车；
overflow-x：汽车；
Z指数：999；
宽度：434px；
身高：238px；
左：50%；
顶部：50%；
margin-left: - 200px！重要的 / * FF IE7；该值的一半宽本身。
边距：- 80px！重要的 / * FF IE7；此值一半的高度。
边距：0px；
位置：固定重要的FF IE7 * / / *！
位置： / * IE6绝对；* /
_top：表达（eval（文件。compatmode）
文件compatmode = = 'css1compat）。
文档元素}。scrollTop +（文件。
文档元素}。自己的这。offsetheight） / 2： / * * / IE6
文件。体。scrollTop +（文件。体。
自己的这。自己） / 2）； / * * / IE5 IE5.5
}
。BG，PopIframe {。
背景颜色：# 666；
显示：无；
宽度：100%；
身高：100%；
左：0；
顶：0； / * * / FF IE7
筛选器：alpha（不透明度= 50）； * ie *
不透明度：0.5； *
Z指数：1；
位置：固定！重要的； / * * / FF IE7
位置： / * IE6绝对；* /
_top：表达（eval（文件。compatmode）
文件compatmode = = 'css1compat）。
文档元素}。scrollTop +（文件。
文档元素}。自己的这。offsetheight） / 2： / * * / IE6
文件。体。scrollTop +（文件。体。
自己的这。自己） / 2）；
}
{。popiframe
筛选器：alpha（不透明度= 0）； * ie *
不透明度：0； *
}
2.js事件：
复制代码代码如下所示：
/ / 16sucai.css CSS / >
函数aa（id）{
var id = id.substring（1,2）；
var obj2 = document.getelementbyid（ID）；
showpigdyt（obj2）；
}
功能showinfo（ID）
{
document.getelementbyid（ID）。style.display =块；
}
功能hiddeninfo（ID）
{
document.getelementbyid（ID）。style.display =没有；
}
点击查看照片热门景点家
功能showpigdyt（obj2）{
无功srcpath = obj2.name；
var id = obj2.id；
无功obox = document.getelementbyid（骗子）；
VaR OBG = document.getelementbyid（BG）；
VaR机器人= document.getelementbyid（底）；
无功abli = obot.getelementsbytagname（礼）；
无功oframe = document.getelementbyid（框）；
/ / var阿里= obox.getelementsbytagname（礼）；
阿里= $（var李{ class= 'conn}）； / /把所有标签李标签（套）
/ / var aimg = obox.getelementsbytagname（IMG）；
var = $（img aimg { class= 'conn}）； / /得到一个标签在img标签（套）
//alert (aImg);
var i =我= 0；
为（i = 0；i < ali.length；i++）{
ALi { i }。索引= i；
ALi {我}。onclick =函数（）{
与（oframe。风格）{
显示块
}
/ /警报（srcpath）；
oframe.innerhtml = ；
无功oimg = oframe.getelementsbytagname（IMG）{ 0 }；
VaR的Iwidth；
VaR的Iheight；
如果（oimg.width＜600 | | { oimg.width = = 0）
Iwidth = 600；
其他{ }
oimg.width Iwidth =；
}
如果（oimg.width＜425 | | { oimg.height = = 0）
的Iheight = 425；
其他{ }
的Iheight = oimg.height；
}
VaR离开= parseInt（（document.documentelement.clientwidth / 2）-（Iwidth / 2））；
VaR ITOP = parseInt（（document.documentelement.clientheight / 2）-（的Iheight / 2）- 50）；
与（oimg。风格）{
高度=宽度 100%；
}
startmove（oframe，{不透明度：100，左：我，上：伊通，宽度：Iwidth，高度的Iheight }）；
obg.style.display =块；
obot.style.display =块；
我现在this.index + 1 =；
}；
}
document.onmousedown =函数（）{
返回false；
}；
（abli { 0 }。onclick=功能）{ / /箭头事件触发
如果（id = 0）{
ID = ali.length；
}
身份证--；
无功pathimg = document.getelementbyid名字（ID）；
oframe.innerhtml = ；
}；
abli { 1 }。onclick =函数（）{
oframe.style.cursor =搬家；
oframe.onmousedown =功能（e）{
无功oevent = E事件| |；
var x = oevent.clientx - oframe.offsetleft；
var y = oevent.clienty - oframe.offsettop；
document.onmousemove =功能（e）{
无功oevent = E事件| |；
var = oevent.clientx X；
var t = oevent.clienty Y；
如果（l < 0）{
l＝0；
{人}
如果（L＞document.documentelement.clientwidth - oframe。offsetwidth）{
我document.documentelement.clientwidth - oframe.offsetwidth；
}
}
如果（t＜0）{
T＝0；
{人}
如果（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 =函数（）{
document.onmouseup = null；
document.onmousemove = null；
}；
返回false；
}；
}；
（abli { 2 }。onclick=功能）{ / /右边的箭头触发
如果（ID = = {（阿里。length-1））
id = 1；
}
身份证+；
无功pathimg = document.getelementbyid名字（ID）；
oframe.innerhtml = ；
}；
（abli { 3 }。onclick=功能）{ / /箭头关闭事件触发
/ /警报（32 +现在- 1）；
/ /警报（32 +铝-镁{现在1 }。offsettop）；
startmove（oframe，{不透明度：0，左：铝-镁{ 1 }我。offsetleft，顶：铝-镁{ 1 }我。offsettop，宽度：150，高度：100 }，函数（）（））{
oframe.style.display =没有；
obg.style.display =没有；
obot.style.display =没有；
oframe.onmousedown = null；
oframe.style.cursor =汽车；
}）；
}；
}
函数在（bigimg）{
无功obox = document.getelementbyid（骗子）；
/ / var阿里= obox.getelementsbytagname（礼）；
阿里= $（var李{ class= 'conn}）； / /把所有标签李标签
var id = bigimg.id；
无功leftid；
无功rightid；
如果（id = 0）{
leftid = ali.length；
rightid = 1；
} else if（ID = = {（阿里。length-1））
leftid =（阿里。length-1）；
rightid = 0；
其他{ }
无功leftid =身份+ +；
无功rightid =身份；
}
无功leftpath = document.getelementbyid（-- leftid名字）；
VaR的一条正确的道路= document.getelementbyid（rightid名字）；
无功lefturl = ；
无功righturl = ；
VaR的宽度= bigimg.width；
VaR高度= bigimg.height；
无功imgurl = righturl；
无功oframe = document.getelementbyid（框）；
bigimg。移动鼠标=函数（）{
如果（事件。offsetx <宽度 / 2）{
bigimg.style.cursor = 'url（图像/ arr_left .cur），汽车；
imgurl = lefturl；
其他{ }
bigimg.style.cursor = 'url（图像/ arr_right .cur），汽车；
imgurl = righturl；
}
}
bigimg。onmouseup =函数（）{
如果（event.offsetx <宽度 / 2）{
oframe.innerhtml = lefturl；
其他{ }
oframe.innerhtml = righturl；
}
}
}
功能startmove（obj，JSON，竖着）{
ClearInterval（obj。定时器）；
obj.timer = setInterval（）{（）函数（
DoMove（obj，JSON，竖着）；
}，30）；
}
功能getstyle（obj，ATTR）{
返回obj.currentstyle OBJ。currentstyle {属性}：getcomputedstyle（obj，false）{属性}；
}
功能domove（obj，JSON，竖着）{
var attr = ；
VaR bstop =真；
对于（ATTR JSON）{
VaR长= 0；
如果（attr = =不透明度）{
长= parseInt（parseFloat（getstyle（obj，ATTR））* 100）；
{人}
长= parseInt（getstyle（obj，ATTR））；
}
VaR迈跃=（JSON {属性} -长） / 5；
迈跃=迈跃> 0 math.ceil（迈跃）：Math.floor（迈跃）；
如果（JSON {属性}！=长）{
bstop = false；
}
如果（attr = =不透明度）{
obj.style.filter =Alpha（透明度：+（长+迈跃）+ ）；
obj.style.opacity =（长+迈跃） / 100；
{人}
obj。风格{属性} =长+迈跃+PX；
}
}
如果（bstop）{
ClearInterval（obj。定时器）；
如果（1）{
OnEnd（）；
}
}
}
三.页div布局：
复制代码代码如下所示：
<表格宽度=100%=0边境cellpadding = 0 cellspacing =0
class=table_01>
暂时没有图片信息
< C：foreach var =图像项目=$ { image_list }
开始= = =STR varStatus>
/ $ {形象。imagepathsmall }onclick=showpigdyt（，{美元形象。imagepathmiddle }）name= / $ {形象。imagepathmiddle } />
6 }
上传的时间：
图片大小：$ {图像。图像大小}