如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。

JavaScript015

如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。,第1张

[HTML部分]

<div id="tbody">

<span class="txt_1">横向的JS相册效果</span>

<div id="mainbody">

<img src="images/01.jpg" alt="横向JS相册" width="640" height="400" id="mainphoto" rel="images/01.jpg" name="#" />

</div>

<img src="images/goleft.gif" width="11" height="56" id="goleft" />

<img src="images/goright.gif" width="11" height="56" id="goright" />

<div id="photos">

<div id="showArea">

<!--src: 缩略图地址 rel: 大图地址 name: 网址 -->

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

</div>

</div>

</div>

[CSS部分]

body {background:#000margin:0font:12px Verdanatext-align:center}

#tbody {width:650pxmargin:20px autotext-align:left}

#mainbody {width:640pxmargin:5pxborder:1px solid #222padding:1px}

#mainphoto {cursor:pointerdisplay:block}

#goleft {float:leftclear:leftmargin:6px 5px 0 3px}

#goright {float:rightclear:rightmargin:6px 3px 0 5px}

#photos {width:610pxheight:54pxline-height:54pxborder:1px solid #222margin:10px 0overflow:hidden}

#showArea img {display:blockfloat:leftmargin:1px 0cursor:pointerborder:1px solid #222}.txt_1 {font:bold 24px Verdana, Tahomacolor:#fff}

[JS部分]

<script language="javascript" type="text/javascript">

var browse = window.navigator.appName.toLowerCase()

var MyMar

var speed = 1//速度，越大越慢

var spec = 1//每次滚动的间距, 越大滚动越快

var minOpa = 90//滤镜最小值

var maxOpa = 100//滤镜最大值

var spa = 2//缩略图区域补充数值

var w = 0

spec = (browse.indexOf("microsoft") >-1) ? spec : ((browse.indexOf("opera") >-1) ? spec*10 : spec*20)

function $(e) {return document.getElementById(e)}

function goleft() {$('photos').scrollLeft -= spec}

function goright() {$('photos').scrollLeft += spec}

function setOpacity(e, n) {

if (browse.indexOf("microsoft") >-1) e.style.filter = 'alpha(opacity=' + n + ')'

else e.style.opacity = n/100

}

$('goleft').style.cursor = 'pointer'

$('goright').style.cursor = 'pointer'

$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa)}

$('mainphoto').onmouseout = function() {setOpacity(this, minOpa)}

$('mainphoto').onclick = function() {location = this.getAttribute('name')}

$('goleft').onmouseover = function() {this.src = 'images/goleft2.gif'MyMar=setInterval(goleft, speed)}

$('goleft').onmouseout = function() {this.src = 'images/goleft.gif'clearInterval(MyMar)}

$('goright').onmouseover = function() {this.src = 'images/goright2.gif'MyMar=setInterval(goright,speed)}

$('goright').onmouseout = function() {this.src = 'images/goright.gif'clearInterval(MyMar)}

window.onload = function() {

setOpacity($('mainphoto'), minOpa)

var rHtml = ''

var p = $('showArea').getElementsByTagName('img')

for (var i=0i<p.lengthi++) {

w += parseInt(p[i].getAttribute('width')) + spa

setOpacity(p[i], minOpa)

p[i].onclick = function() {location = this.getAttribute('name')}

p[i].onmouseover = function() {

setOpacity(this, maxOpa)

$('mainphoto').src = this.getAttribute('rel')

$('mainphoto').setAttribute('name', this.getAttribute('name'))

setOpacity($('mainphoto'), maxOpa)

}

p[i].onmouseout = function() {

setOpacity(this, minOpa)

setOpacity($('mainphoto'), minOpa)

}

rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />'

}

$('showArea').style.width = parseInt(w) + 'px'

var rLoad = document.createElement("div")

$('photos').appendChild(rLoad)

rLoad.style.width = "1px"

rLoad.style.height = "1px"

rLoad.style.overflow = "hidden"

rLoad.innerHTML = rHtml

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>jQuery实现的点击图片放大且在当前页面查看原图丨芯晴网页特效丨CsrCode.Cn</title>

<style type="text/css">

div, ul, li {

margin: 0px

padding: 0px

list-style-type: none

}

#Over {

position: absolute

width: 100%

z-index: 100

left: 0px

top: 0px

}

.img {

width:90%

background-color: #FFF

height: 90%

padding: 3px

border-top-width: 1px

border-right-width: 1px

border-bottom-width: 1px

border-left-width: 1px

border-top-style: solid

border-right-style: solid

border-bottom-style: solid

border-left-style: solid

}

.content {

text-align: center

width: 200px

height:150px

margin-right: auto

margin-left: auto

}

.EnlargePhoto {

cursor: pointer

}

.TempContainer {

position: absolute

z-index: 101

margin-right: 0px

margin-left: 0px

text-align: center

width: 100%

cursor: pointer

}

</style>

</head>

<script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {

var ImgsTObj = $('.EnlargePhoto')//class=EnlargePhoto的都是需要放大的图像

if(ImgsTObj){

$.each(ImgsTObj,function(){

$(this).click(function(){

var currImg = $(this)

CoverLayer(1)

var TempContainer = $('<div class=TempContainer></div>')

with(TempContainer){

appendTo("body")

css('top',currImg.offset().top)

html('<img border=0 src=' + currImg.attr('src') + '>')

}

TempContainer.click(function(){

$(this).remove()

CoverLayer(0)

})

})

})

}

else{

return false

}

//====== 使用/禁用蒙层效果 ========

function CoverLayer(tag){

with($('#Over')){

if(tag==1){

css('height',$(document).height())

css('display','block')

css('opacity',0.9)

css("background-color","#000")

}

else{

css('display','none')

}

}

}

})

</script>

<body>

<div class="content">

<IMG class="img EnlargePhoto" src="/images/m03.jpg"><br /><br />

<IMG class="img EnlargePhoto" src="/images/m04.jpg"><br /><br />

</div>

</body>

</html>

<br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可