<!
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/html; charset=gb2312"
/>
<
meta
name
="Author"
content
="番茄红了"
/>
<
title
>
JS相册效果 -- 纵向
</
title
>
<
style
>
...
body {...} { background : #000000 ; margin : 20px 0 ; font : 12px Verdana, Arial, Tahoma ; text-align : center ; vertical-align : middle ; color : #FFFFFF } img {...} { border : none } .txt_1 {...} { font : bold 24px Verdana, Tahoma ; color : #fff } img.thumb_img {...} { cursor : pointer ; display : block ; margin-bottom : 10px } img#main_img {...} { cursor : pointer ; display : block ; } #gotop {...} { cursor : pointer ; display : block ; } #gobottom {...} { cursor : pointer ; display : block ; } #showArea {...} { height : 355px ; margin : 10px ; overflow : hidden } .info {...} { color : #666 ; font : normal 9px Verdana ; margin-top : 20px } .info a:link, .info a:visited {...} { color : #666 ; text-decoration : none } .info a:hover {...} { color : #fff ; text-decoration : none }
</
style
>
</
head
>
<
body
>
<
table
width
="760"
border
="0"
align
="center"
cellpadding
="0"
cellspacing
="5"
>
<
tr
>
<
td
height
="75"
colspan
="2"
align
="left"
class
="txt_1"
>
JS相册效果
</
td
>
</
tr
>
<
tr
>
<
td
width
="640"
align
="center"
><
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="640"
height
="400"
border
="0"
id
="main_img"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
link
="http://www.tblog.com.cn"
/></
td
>
<
td
width
="110"
align
="center"
valign
="top"
>
<
img
src
="http://www.tblog.com.cn/test/images/gotop.gif"
width
="100"
height
="14"
id
="gotop"
/>
<
div
id
="showArea"
>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
link
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
border
="0"
class
="thumb_img"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
link
="http://www.tblog.com.cn"
/>
</
div
>
<
img
src
="http://www.tblog.com.cn/test/images/gobottom.gif"
width
="100"
height
="14"
id
="gobottom"
/></
td
>
</
tr
>
</
table
>
<
center
class
="info"
><
a
href
="http://www.tblog.com.cn"
title
="番茄's Blog"
>
http://www.tblog.com.cn
</
a
>
|
Akon
By
2006/12/26
</
center
>
</
body
>
</
html
>
<
script
language
="javascript"
type
="text/javascript"
>
...
function $(e) ... { return document.getElementById(e);} document.getElementsByClassName = function (cl) ... { var retnode = []; var myclass = new RegExp( ' /b ' + cl + ' /b ' ); var elem = this .getElementsByTagName( ' * ' ); for ( var i = 0 ; i < elem.length; i ++ ) ... { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; } var MyMar; var speed = 1 ; // 速度,越大越慢 var spec = 1 ; // 每次滚动的间距, 越大滚动越快 var ipath = ' http://www.tblog.com.cn/test/images/ ' ; // 图片路径 var thumbs = document.getElementsByClassName( ' thumb_img ' ); for ( var i = 0 ; i < thumbs.length; i ++ ) ... { thumbs[i].onmouseover = function () ... {$( ' main_img ' ).src = this .rel; $( ' main_img ' ).link = this .link;} ; thumbs[i].onclick = function () ... {location = this .link} } $(' main_img ' ).onclick = function () ... {location = this .link;} $(' gotop ' ).onmouseover = function () ... { this .src = ipath + ' gotop2.gif ' ; MyMar = setInterval(gotop,speed);} $(' gotop ' ).onmouseout = function () ... { this .src = ipath + ' gotop.gif ' ; clearInterval(MyMar);} $(' gobottom ' ).onmouseover = function () ... { this .src = ipath + ' gobottom2.gif ' ; MyMar = setInterval(gobottom,speed);} $(' gobottom ' ).onmouseout = function () ... { this .src = ipath + ' gobottom.gif ' ; clearInterval(MyMar);} function gotop() ... {$( ' showArea ' ).scrollTop -= spec;} function gobottom() ... {$( ' showArea ' ).scrollTop += spec;}
</
script
>
横向的,第二个版本,加了兼容IE、FF、Opera的滤镜效果
<!
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/html; charset=gb2312"
/>
<
meta
name
="Author"
content
="番茄红了"
/>
<
title
>
JS相册效果 -- 横向
</
title
>
<
style
>
...
body {...} { background : #000 ; margin : 0 ; font : 12px Verdana ; text-align : center ; } #tbody {...} { width : 650px ; margin : 50px auto ; } #mainbody {...} { width : 640px ; margin : 5px ; border : 1px solid #222 ; padding : 1px } #mainphoto {...} { cursor : pointer ; display : block ; } #goleft {...} { float : left ; clear : left ; margin : 6px 5px 0 3px ; } #goright {...} { float : right ; clear : right ; margin : 6px 3px 0 5px ; } #photos {...} { width : 610px ; height : 54px ; line-height : 54px ; border : 1px solid #222 ; margin : 10px 0 ; overflow : hidden ; } #showArea img {...} { display : block ; float : left ; margin : 1px 0 ; cursor : pointer ; border : 1px solid #222 }
</
style
>
</
head
>
<
body
>
<
div
id
="tbody"
>
<
div
id
="mainbody"
>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="640"
height
="400"
id
="mainphoto"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
</
div
>
<
img
src
="http://www.tblog.com.cn/test/images/goleft.gif"
width
="11"
height
="56"
id
="goleft"
/>
<
img
src
="http://www.tblog.com.cn/test/images/goright.gif"
width
="11"
height
="56"
id
="goright"
/>
<
div
id
="photos"
>
<
div
id
="showArea"
>
<!--
SRC: 缩略图地址 REL: 大图地址 NAME: 网址
-->
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/3.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/3.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/4.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/4.jpg"
name
="http://www.tblog.com.cn"
/>
<
img
src
="http://www.tblog.com.cn/test/images/5.jpg"
alt
="番茄红了..."
width
="80"
height
="50"
rel
="http://www.tblog.com.cn/test/images/5.jpg"
name
="http://www.tblog.com.cn"
/>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
<
script
language
="javascript"
type
="text/javascript"
>
...
var browse = window.navigator.appName.toLowerCase(); var MyMar; var speed = 1 ; // 速度,越大越慢 var spec = 1 ; // 每次滚动的间距, 越大滚动越快 var minOpa = 50 ; // 滤镜最小值 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 = ' http://www.tblog.com.cn/test/images/goleft2.gif ' ; MyMar = setInterval(goleft, speed);} $(' goleft ' ).onmouseout = function () ... { this .src = ' http://www.tblog.com.cn/test/images/goleft.gif ' ; clearInterval(MyMar);} $(' goright ' ).onmouseover = function () ... { this .src = ' http://www.tblog.com.cn/test/images/goright2.gif ' ; MyMar = setInterval(goright,speed);} $(' goright ' ).onmouseout = function () ... { this .src = ' http://www.tblog.com.cn/test/images/goright.gif ' ; clearInterval(MyMar);} window.onload = function () ... { setOpacity($( ' mainphoto ' ), minOpa); var rHtml = '' ; var p = $( ' showArea ' ).getElementsByTagName( ' img ' ); for ( var i = 0 ; i < p.length; i ++ ) ... { 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
>