仿google艺术家 界面 相册效果
2009-06-20 14:07 贪婪的小猪 阅读(258) 评论(0) 编辑 收藏 举报
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--<script src="../mootools-1.2.2-core-nc.js" type="text/javascript" charset="utf-8"></script>-->
<script src="http://mootools.net/download/get/mootools-1.2.3-core-yc.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, form, fieldset, embed, object, applet {
border: 0 none;
margin: 0;
padding: 0;
}
body {
color: #000000;
font-family: Arial, sans-serif;
font-size: 62.5%;
}
#container {
font-size: 1.3em;
margin: 0 auto;
text-align: left;
width: 980px;
}
#filmstrip {
background: transparent url(http://www.google.cn/help/ig/art/images/film_bg.jpg) repeat-x scroll 0 0;
clear: both;
height: 138px;
width: 968px;
}
#filmstrip a#leftarrow {
background: transparent url(http://www.google.cn/help/ig/art/images/arrow_left.jpg) repeat scroll left top;
height: 137px;
margin: 0;
padding: 0;
width: 29px;
}
#filmstrip a#leftarrow.on:hover, #filmstrip a#rightarrow.on:hover {
background-position: -58px 50%;
}
#filmstrip a#leftarrow.on, #filmstrip a#rightarrow.on {
background-position: -29px 50%;
cursor: pointer;
}
#filmstrip a, #filmstrip a:visited {
color: #0000CC;
display: block;
float: left;
margin-top: 1px;
text-align: center;
}
div.clip {
float: left;
height: 136px;
overflow:hidden;
float:left;
position: relative;
width: 910px;
z-index: 2;
}
div#thumblist {
line-height: 1.1em;
position: absolute;
z-index: 1;
}
#filmstrip a.selected, #filmstrip a.selected:visited {
background: #FFFFFF none repeat scroll 0 0;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
color: #000000;
font-weight: bold;
text-decoration: none;
width: 78px;
}
#filmstrip a, #filmstrip a:visited {
color: #0000CC;
display: block;
float: left;
height: 127px;
margin-top: 1px;
padding: 10px;
text-align: center;
width: 80px;
}
#filmstrip a span {
display: block;
}
#filmstrip a span img {
border: 1px solid #CCCCCC;
margin-bottom: 7px;
}
#filmstrip a#rightarrow {
background: transparent url(http://www.google.cn/help/ig/art/images/arrow_right.jpg) repeat scroll left top;
float: left;
height: 137px;
margin: 0;
padding: 0;
width: 29px;
}
.preview{
padding: 30px 180px;
position:absolute;
}
</style>
<div id="container">
<div id="filmstrip">
<a onclick="" id="leftarrow" class=""></a>
<div class="clip" style="overfo">
<div id="thumblist" style="left: 0px;">
</div>
</div><a id="rightarrow" class="on" onclick=""></a>
</div>
<div id="previewContainer" class="visible preview">
<img width="500" height="400" id="imgFull" title="" alt="" class="logo" src="../6.jpg"/>
<p id="previewAbout"><b>关于此艺术家</b></p>
</div>
</div>
<script>
var tuPian_obj={
"BAAAA": {
"id": "BAAAA",
"name": "三等分1",
"src": "http://img1.cache.netease.com/catchpic/1/1B/1BE0A7272DE5F94DFD95C074A7A98778.jpg",
"content2": "0"
},
"BAAAb": {
"id": "BAAAb",
"name": "飞机",
"src": "http://img1.cache.netease.com/catchpic/8/88/881329945CF8CD3947FAD1F6BDF607A0.jpg",
"content2": "0"
},
"BAAAC": {
"id": "BAAAC",
"name": "李鼎荣",
"src": "http://img1.cache.netease.com/catchpic/B/B1/B13CADCAFD604447C69B13B0977ECD3D.jpg",
"content2": "0"
},
"BAAAd": {
"id": "BAAAd",
"name": "三等分2",
"src": "http://img1.cache.netease.com/cnews/2009/6/19/2009061909555425452.jpg",
"content2": "0"
}
}
var showZhaoPian=function(){
var moban_xt='<a onclick="" href="#"><span><img width="68" height="68" title="{name}" alt="{name}" src="{src}"/></span>{name}</a>';
//var moban_dt='<img width="500" height="400" id="" title="{name}" alt="{name}" class="logo" src="{src}"/><p id="previewAbout"><b>{content2}</b></p>';
//加载图片
var numValue,thumblist = $('thumblist'),leftarrow=$('leftarrow'),rightarrow=$('rightarrow'),tuPian_obj_length=0,imgFull=$('imgFull');
(10).times(function(){
for (var i in tuPian_obj) {
var c = moban_xt.substitute(tuPian_obj[i]);
numValue+=c+' ';
tuPian_obj_length++;
}
})
var d=new Element('div')
d.innerHTML=numValue;
//总left
var num_Left= -1 * (tuPian_obj_length - 9) * 100;
//居中数组
var center;
thumblist.adopt(center=d.getChildren(null,true))
var otherL,otherR;
otherL=center.filter(function(x){
if(x.uid<11&&x.uid>6)return true;
})
otherR=center.filter(function(x){
if(x.uid<48&&x.uid>42)return true;
})
center=center.filter(function(x){
if(x.uid>10&&x.uid<43)return true;
})
otherL.each(function(x,y){
x.onclick=function(){
$$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
$(this).addClass("selected"),selectedUid=$(this).uid;
imgFull.src=$(this).getElements('img')[0].src
var a=new Fx.Tween(thumblist,{
onComplete: function(){
leftarrow.removeClass('on');
}
});
a.start('left', 0)
return false;
}
})
otherR.each(function(x,y){
x.onclick=function(){
$$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
$(this).addClass("selected"),selectedUid=$(this).uid;
imgFull.src=$(this).getElements('img')[0].src
var a=new Fx.Tween(thumblist,{
onComplete: function(){
rightarrow.removeClass('on');
}
});
a.start('left',num_Left)
return false;
}
})
center.each(function(x,y){
x.onclick=function(){
$$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
$(this).addClass("selected"),selectedUid=$(this).uid;
imgFull.src=$(this).getElements('img')[0].src
var a=new Fx.Tween(thumblist,{
onComplete: function(){
if(thumblist.style.left.toInt()!=0)
leftarrow.addClass('on');
if(thumblist.style.left.toInt()!=num_Left)
rightarrow.addClass('on');
}
});
a.start('left', -1*y*100)
return false;
}
})
//移动照片
leftarrow.addEvents({
click:function(){
var left=thumblist.style.left;
rightarrow.addClass('on');
if (left.toInt() >= -300) {
var a=new Fx.Tween(thumblist,{
onComplete: function(){
leftarrow.removeClass('on')
}
});
a.start('left', 0)
}
else
thumblist.tween('left', left.toInt() + 300)
}
})
rightarrow.addEvents({
click:function(){
var left=thumblist.style.left;
leftarrow.addClass('on');
if(left.toInt()<=num_Left+300)thumblist.tween('left',num_Left)
else thumblist.tween('left',left.toInt()-300)
if (thumblist.style.left.toInt() == num_Left) {
rightarrow.removeClass('on');
}
}
})
}
new showZhaoPian();
</script>
</body>
</html>
关于此艺术家
