利用API制作相册展页[JQuery版]

之前因为图片大,数据解析多次的原因,我的API相册展示页访问起来表示鸭梨巨大,所以我就央求了老四同学帮我写了这么一个JQ版本的。【没办法,我是JS盲o(╯□╰)o】使用之后访问起来果然什么鸭梨都木有啊!在此非常感谢老四同学在百忙之中帮我做了这么个小东西。

废话不多说,先放上相册预览地址:预览地址一 | 预览地址二

继续贴上代码【你也可以在这里找到这段代码】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>

 


        <title></title>         

<style>
body {
        background-color:#E9E9E9;
        color:#333333;
        font-family:'Microsoft YaHei','Lucida handwriting',Arial,Helvetica,sans-serif;
        font-size:10pt;
        margin:0;
        padding:0;
        text-shadow: 0px 0px 1px #999;
        -webkit-text-size-adjust:none;
}

a,a:hover {
        color:#333333;
        text-decoration:none;
}


.photo, .album {
        display:inline-block;
        margin:5px;
        padding:10px 0;
        float:left;
    position: relative;
        text-align:center;
    background-color: #fff;
    border: 1px solid #eee;
        -webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        -moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        box-shadow:2px 2px 3px rgba(135,139,144,0.4);
}

.photo:before, album:before {
    -webkit-transform: skew(-25deg) rotate(-6deg);
    -moz-transform: skew(-25deg) rotate(-6deg);
    transform: skew(-25deg) rotate(-6deg);
    left: 27px;
    width: 70%;
    height: 35%;
    content: ' ';
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 7px;
    z-index: -1;
}

.album img {
        width:120px;
}

.img_title {
        margin:auto;
        display:block;
        width:160px;
        height:17px;
        overflow: hidden;
}

.img_date {
        margin:2px auto 0 auto;
        display:block;
        width:160px;
        height:17px;
        overflow: hidden;
        color:#888;
}

#back {
        display:inline-block;
        margin:5px;
        padding:10px;
        float:left;
    position: relative;
        text-align:center;
    background-color: #fff;
    border: 1px solid #eee;
        -webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        -moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        display: none;
}

#back:hover {
    background-color: #ccc;
}

</style>
        
</head><body> 
        


                

                
        
        


</body>
</html>

友情提示:本代码只是一个实例代码,请大家根据自己的需要做好相关的修改。

事情多多+败家

ipod touch嗯哼?奇怪为什么放个Ipod Touch的头?额……其实也没什么,就是最近有点败家的冲动了……谁要是有闲置的通知我一声,呵呵……

说到败家,最近确实败家了,不过没有上面那么严重就是,升级了下电脑配件而已。换了跟内存条,外带升级了下硬盘。都是让朋友在南昌买的,没办法,我属于硬件白痴级人物。然后在淘宝买了个ipod的硬盘盒,拿换下来的250GB的硬盘当移动硬盘了,后面上图,很帅气,我比较喜欢。(那只手大家可以忽略啊)杯具的是内存槽有一个被我掰坏了,本来打算两根一起用的,额,现在看来只能老老实实的用2GB的那根了。不是我手贱,是新手嘛……所以说我掰坏第一个槽之后第二个就没有坏了嘛……额……吐血……

cats

那么再来谈谈最近比较敏感的话题,变态被停。我主要想说的是上帝保佑,还好我的越狱在此之前已经完了,要不然我会气吐血的。不过话说回来,关个变态收集站有什么用?我觉得只要不禁止P2P这种下载行为(不知道变态是不是P2P),我想变态是不会消亡的。另外小小嘀咕几句,似乎电驴变干净了许多啊(我同学的感慨……)。话说最近用以前存的一个死亡笔记的种子,还有用嘛,而且速度嗖嗖的,啧啧……广电这是治标不治本啊!再话说,似乎这个对我追动漫没什么影响哦……火影该更新的还是更新,犬夜叉该发布的还能提前发布,哈哈!这里要感慨一下,以前用在迅雷总搜到红旅的链接,每次都下不了,发现淫家用的是FTP的呀,要密码的哇……上次直接从它们网站下,一下就下下来了,呵呵,RP问题啊……这里推荐下红旅,更新动漫总是很前头,基本要提前那么一两天……

那么再接下一件事情,上次看到猪猪搞了个新相册,用的是我以前用过的程序,想当年我玩PJ的时候就玩过了,觉得他搞的不错,所以我也想搞了,大概捣鼓了一下后,雏形是出来了,放上地址:怡红画廊。按照zern大哥的说法就是,怡红公子的地皮又多了一块……哈哈!PS:内含本人自曝照,欢迎大家践踏围观……其实我觉得吧,要是能有个直接显示外链相册的相册程序就更好了。不过正好流量用的不多,拿它来消耗消耗。再怎么也不能便宜主机商啊!呵呵!

然后是最近玩的游戏,最近疯狂往军军电脑上装游戏,实况足球,极品飞车,红色警戒,NBA2K10,原型体 + 植物大战僵尸……话说植物大战僵尸这游戏,恩,似乎还挺好玩的,上张囧图

[caption id="attachment_930" align="aligncenter" width="450" caption="僵尸怎么走?"]将是怎么走?[/caption]

恩,最后的最后,来谈谈学习,前些天课多的要死啊,三门专业课连着上,外加无数的实验课,我XX,基本一天最少是8节课,我汗颜……不过最近少了,因为下下周就要考试了,额……另外四级也考完了,简单一句话,做的相当不顺手,只有下个学期再来了……不过一想到分到B班,就囧囧啊……无奈啊无奈……

最后的最后的最后,补一句:信春哥,得永生;信曾哥,咱不挂科!哈哈!