JQUERY制作的全屏个性相册展示.docx
- 文档编号:2838211
- 上传时间:2022-11-15
- 格式:DOCX
- 页数:27
- 大小:33.52KB
JQUERY制作的全屏个性相册展示.docx
《JQUERY制作的全屏个性相册展示.docx》由会员分享,可在线阅读,更多相关《JQUERY制作的全屏个性相册展示.docx(27页珍藏版)》请在冰豆网上搜索。
JQUERY制作的全屏个性相册展示
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
*{
margin:
0;
padding:
0;
}
body{
font-family:
"TrebuchetMS","MyriadPro",Arial,sans-serif;
font-size:
14px;
background:
#222;
color:
#333;
text-shadow:
1px1px1px#fff;
overflow-x:
hidden;
}
h1{
font-size:
56px;
color:
#ccc;
}
h2{
font-size:
20px;
padding:
10px0px10px0px;
margin:
15px0px20px0px;
}
a{
color:
#555;
text-decoration:
none;
}
a:
hover{
color:
#222;
}
p{
padding:
5px0px;
}
.wrapper{
width:
960px;
margin:
20pxauto;
}
.clear{
clear:
both;
}
.footer{
text-align:
center;
width:
100%;
padding:
20px0px;
clear:
both;
margin-top:
30px;
}
.footera{
margin:
0px20px;
}
/*SliderStyle*/
.pxs_container{
width:
100%;
height:
420px;
position:
relative;
border-top:
7pxsolid#333;
border-bottom:
7pxsolid#333;
overflow:
hidden;
-moz-box-shadow:
0px0px7px#000;
-webkit-box-shadow:
0px0px7px#000;
box-shadow:
0px0px7px#000;
}
.pxs_bg{
background:
transparenturl(../images/bg.png)repeattopleft;
}
.pxs_bgdiv{
position:
absolute;
top:
0px;
left:
0px;
width:
7584px;/*1264pxwindowwidthtimesnumberofimages*/
height:
420px;
background-repeat:
repeat;
background-position:
topleft;
background-color:
transparent;
}
.pxs_bg.pxs_bg1{
background-image:
url(../images/bg1.png);
/*leftnegative1/8ofww*/
}
.pxs_bg.pxs_bg2{
background-image:
url(../images/bg2.png);
/*leftnegative1/4ofww*/
}
.pxs_bg.pxs_bg3{
background-image:
url(../images/bg3.png);
/*leftnegative1/2ofww*/
}
.pxs_slider_wrapper{
display:
none;
}
.pxs_containerul{
margin:
0px;
padding:
0px;
list-style:
none;
}
ul.pxs_slider{
position:
absolute;
left:
0px;
top:
0px;
height:
420px;
}
ul.pxs_sliderli{
height:
420px;
float:
left;
position:
relative;
}
ul.pxs_sliderliimg{
display:
block;
margin:
35pxauto0pxauto;
-moz-box-shadow:
0px0px7px#222;
-webkit-box-shadow:
0px0px7px#222;
box-shadow:
0px0px7px#222;
border:
8pxsolidtransparent;
-moz-border-radius:
4px;
-webkit-border-radius:
4px;
border-radius:
4px;
}
ul.pxs_thumbnails{
height:
35px;
position:
absolute;
top:
320px;
left:
50%;
}
ul.pxs_thumbnailsli{
position:
absolute;
display:
block;
}
ul.pxs_thumbnailsliimg{
border:
5pxsolid#FFFFFF;
-moz-box-shadow:
1px1px7px#555;
-webkit-box-shadow:
1px1px7px#555;
box-shadow:
1px1px7px#555;
cursor:
pointer;
display:
block;
opacity:
0.7;
}
ul.pxs_thumbnailsli.selectedimg{
opacity:
1.0;
}
.pxs_navigationspan{
position:
absolute;
width:
30px;
height:
60px;
-moz-box-shadow:
0px0px2px#000;
-webkit-box-shadow:
0px0px2px#000;
box-shadow:
0px0px2px#000;
top:
145px;
opacity:
0.6;
-moz-border-radius:
4px;
-webkit-border-radius:
4px;
border-radius:
4px;
cursor:
pointer;
}
.pxs_navigationspan:
hover{
opacity:
0.9;
}
.pxs_navigationspan.pxs_prev{
background:
#000url(../images/prev.png)no-repeatcentercenter;
}
.pxs_navigationspan.pxs_next{
background:
#000url(../images/next.png)no-repeatcentercenter;
}
.pxs_loading{
color:
#fff;
font-size:
20px;
padding:
15px15px15px50px;
position:
absolute;
background:
#333url(../images/ajax-loader.gif)no-repeat10px50%;
-moz-border-radius:
15px;
-webkit-border-radius:
15px;
border-radius:
15px;
opacity:
0.7;
width:
180px;
position:
absolute;
top:
150px;
left:
50%;
margin-left:
-90px;
}
varCufon=(function(){varm=function(){returnm.replace.apply(null,arguments)};varx=m.DOM={ready:
(function(){varC=false,E={loaded:
1,complete:
1};varB=[],D=function(){if(C){return}C=true;for(varF;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!
window.opera&&document.readyState){(function(){E[document.readyState]?
D():
setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);returnfunction(F){if(!
arguments.length){D()}else{C?
F():
B.push(F)}}})(),root:
function(){returndocument.documentElement||document.body}};varn=m.CSS={Size:
function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){returnD/B*this.value};this.convertFrom=function(D){returnD/this.value*B};this.toString=function(){returnthis.value+this.unit}},addClass:
function(C,B){varD=C.className;C.className=D+(D&&"")+B;returnC},color:
j(function(C){varB={};B.color
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQUERY 制作 全屏 个性 相册 展示