首页 > 教程 > 关键词  > jquery最新资讯  > 正文

使用jQuery和CSS3来访问Dribbble的API

2012-07-25 15:27 · 稿源:gbin1.com

在线演示    本地下载

Dribbble是一个非常知名的设计社区,和其它大型社区类似,它也可以提供给你开放API来访问它的内容,在今天的这个教程中,我们将使用来自Dribbble的第三方API,生成一个最新设计作品展示页面,希望大家喜欢!

HTML代码

<div class="drib-list clearfix" id="popular">    
    <h1>Popular</h1>   
</div>

首先我们创建一个div,指定class为drib-list。然后当所有的dribbble内容都加载后,传递到预先定义的HTML结构中。

<div class="drib-item">
    <div class="drib-image">
        <a href="{url}"><img src="{image}" alt="{title}" /></a>
    </div>
    <div class="drib-detail">
        <div class="drib-detail-wrapper">
            <a href="#">{title}</a>
            <ul>
                <li class="views">{views}</li>
                <li class="likes">{likes}</li>
                <li class="comments">{comments}</li>
            </ul>
        </div>
    </div>
</div>

CSS代码

以下为CSS代码:

body {
    font-family:arial;
    font-size:75%;
    margin:0 0 170px 0;
    padding:0;
    background: #2F2F2F;
    color: #C6C6C6;    
}
 
hr {
    -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    -o-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
    border-bottom: 1px solid #121212;
    border-top: none;  
    margin: 18px 0;
    display:block;
}
 
h1 {
    font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
    text-align: left;
    color: #555;
    text-shadow: 0px 2px 5px #111; 
    margin: 20px 0 10px 0; 
}
 
.drib-list {
    width: 1080px;
    margin:15px auto 0 auto;
    padding-left:10px;
}
 
.drib-item {
    width:200px;
    height:150px;
    border:5px solid #ccc;
    position:relative;
    overflow:hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
    background: #202020;
    background-color: rgba(0, 0, 0, 0.3);      
    margin-bottom:10px;
    float:left;
    margin-right:10px;
}
 
.drib-image,
.drib-detail {
    width:100%;
    position:absolute;
    left:0;
    
}
 
.drib-image {
    top:0; 
    z-index:10;
}
    
    .drib-image img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border:0;  
    }      
 
.drib-detail {     
    z-index:0;
    height:50%;
    bottom:0;
    background:#333;
    -webkit-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
 
    .drib-detail-wrapper {
        margin:14px 10px 0 10px;
    }
 
    .drib-detail a {
        color:#eee;
        font-weight:bold;
        display:block;
        text-decoration:none;
        font-size:110%;
    }  
    
    .drib-detail a:hover {
        color:#ffffff
    }  
        
    .drib-detail ul {
        margin:2px 0 0 0 ;
        padding:0;
        list-style:none;
    }  
    
    .drib-detail li {
        float:left;
        margin-right:5px;
        background:url('sprite.png') no-repeat 0 0;
        padding-left:24px;
        height:20px;
        line-height:22px
    }          
    
    .drib-detail li.comments {
        background-position: 0 0;      
    }          
 
    .drib-detail li.views {
        background-position: 0 -39px;      
    }          
 
    .drib-detail li.likes {
        background-position: 0 -79px;
    }                          
            
    /* new clearfix */
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

Javascript代码

dribbble的API非常简单直接,这里我们使用这俩个:

1.https://api.dribbble.com/shots/{list}: 返回debuts, everyone, popular的发布。

2.https://api.dribbble.com/players/{id}/shots: 返回某个用户最近的发布。

  • 相关推荐
  • 大家在看
  • 腾讯云服务器12.12限时秒杀-1核2G首年50元

    腾讯云服务器12.12多种机型限时抢购,1核2G服务器4.17元/月,2核4G服务器6.17元/月,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

    广告
  • Apple News已经是英国浏览量最大的新闻应用 但BBC的使用时间更长

    英国《Press Gazette》的新数据称,2021年12月,所有15岁以上的互联网用户中,有27%使用了Apple News应用...英国第二大新闻应用的是BBC新闻应用,这占了所有15岁以上互联网用户的25.2%,但它的总阅读时间也达到了22亿分钟...在英国,更知名的名字包括天空新闻,它以330万用户排在第四位...尽管提到了网站的使用,但本次统计数字似乎是专门针对新闻应用的使用,它似乎没有计算通过手机或平板电脑上的浏览器访问此类服务的用户......

  • “当中年人买了AirPods”上热搜!网友:秒变BB

    虽然苹果AirPods在发布之初,受到诸多业内人士、消费者吐槽,各种看起来就很容易掉”像扯断了线的Earpods”的批评声层出不穷,然而在AirPods发布后不久,行业的TWS耳机就呈爆发性的发展,各大手机巨头包括耳机厂商都陆续发布了自家无线蓝牙耳机。今日,一则#当中年人买了AirPods#的话题冲上微博热搜,引起网友热议。从话题视频来看,一男子将自己的AirPods配上了独特”的保护壳,并将其挂在了皮带上,画面甚至毫无违和感。对此,众

  • 迪辅乐Bb-12益生菌 留住宝宝的纯真笑容

    迪辅乐生物汇集了全球多个科研机构的研发成果,自建符合欧盟严格标准的生产基地、全球优质的基因研究平台等,还在中国拥有自己的生物安全二级加强型微生物免疫代谢实验室,具备自主微生物基因分析能力和菌株分离、培养、鉴定、筛选能力,主要研究共生微生物的免疫和代谢功能,并建立中国人群益生菌的菌株库,打造适合中国人健康问题的益生菌产品...迪辅乐深知父母们的担忧,因此迪辅乐Bb-12益生菌的成分极为精简,只有动物双歧杆菌Bb-12以及用作保护剂的高纯度葵花籽油,每6滴含10亿CFU活性菌,不含乳糖、奶粉、麸质、菊粉等过敏原物质,经临床研究证明,其菌株能耐受胃肠道环境并在肠道中定殖,代谢过程中不会产品尸胺、腐胺、组胺等物质...宝宝的笑容是父母们心中的一抹阳光,迪辅乐生物始终秉承“科技转为关爱”理念,以科技感和使用感俱佳的优质产品,留住宝宝的纯真笑容,也让父母们心中的那一束光不会被阴霾遮盖...

  • 迪奥Bobby手袋上线寺库,潮酷感十足

    挑选大牌精品单品,当然是上寺库。寺库是亚洲领先的线上线下精品生活方式平台,一直致力于为用户提供精品生活方式,平台内汇聚了大量来自世界各地的奢侈品品牌,产品多达几十万!喜欢潮酷,追逐潮流的朋友们,关注寺库,你可以更快洞悉时尚风尚,成为引领潮流的先锋。如果你喜欢大牌的潮酷,偏爱个性的穿搭,那么一定要了解下寺库这款迪奥Bobby East-West手袋,寺库这款迪奥Bobby手袋以高雅的轮廓与协调的比例彰显单肩包的摩登魅力

  • 英政府:BBC电视执照许可费于2027年取消

    据国外媒体报道,日前英国政府宣布冻结英国广播公司(BBC)未来两年的资金,并且BBC在2027年将不再收取电视许可费,这一举措将大大打击BBC的财务状况,而将不得不大幅削减其节目预算...在英国观看直播、录制直播或者使用BBC iPlayer播放或下载任何节目就要TV Licence,也就是电视执照许可,BBC负责分配指定公司管理和收取电视执照的费用...如按照通胀率增加许可费,那么每年费用将在4月份上升到167英镑...

  • BBC许可费将于2027年取消 资金将被冻结

    据《卫报》报道,在英国政府表示未来两年广播公司的资金将被冻结,并在2027年完全取消许可费后,BBC将不得不对其节目预算进行大幅削减...Dorries的盟友说,在约翰逊政府的领导下,不会有进一步的许可费协议,他们将开始就该公司的一个全新的资金模式进行谈判...BBC已经在为许可费的结束做准备,建议包括对宽带订阅进行普遍征收,或从一般税收中为广播公司提供资金--尽管这可能会破坏其编辑的独立性,使其更加受制于政府的愤怒......

  • Abby’s Choice完子心选击退危“肌” 升级版神经酰胺水乳时刻强韧年轻肌

    升级后的神经酰胺修护水乳添加了品牌独家专研修护成分Cerashield「舒胺修™」,可针对冬季护肤难题,修护皮肤受损屏障,缓解肌肤缺水所引发的敏感症状,让皮肤时刻水润在线,美美迎接即将到来的春天...作为Abby’s Choice完子心选全新升级神经酰胺修护水乳的核心成分,CERASHIELD「舒胺修™」由Abby’s Choice完子心选独家研发,为肌肤外补内促神经酰胺,全面激发屏障自愈力......

  • 如何实现沉浸式带娃?Get这款迪辅乐DHA Bb-12益生菌,带娃也能优雅从容

    为了能提供适合中国人健康问题的益生菌产品,迪辅乐生物汇集了全球多个科研机构的研发成果,自建微生物免疫代谢实验室、符合欧盟严格标准的生产基地、全球优质的基因研究平台等...迪辅乐DHABb-12益生菌油滴剂的成分仅有DHA藻油、动物双歧杆菌Bb-12以及高纯度的葵花籽油,不含乳糖、麸质、奶粉、菊粉等易引起宝宝过敏的物质,也不含能促进益生菌流动的助流剂等物质,因此宝爸宝妈们在给宝宝食用之前先摇匀,每6滴就含约10亿CFU动物双歧杆菌Bb-12以及约50mgDHA藻油,还有用作保护剂的高纯度葵花籽油,能保障有充足的活性益生菌菌株安全到达宝宝肠道并定殖,其所采用的益生菌菌株在代谢过程中均不会产生尸胺、组胺、腐胺等物质...为了减轻这种负担,迪辅乐DHABb-12益生菌油滴剂不仅瓶身小巧,还采用特殊的油滴剂型,不用冲泡,在需要补充益生菌时,只需把瓶盖拧开,直接滴入口中即可...宝宝有了良好的生活状态,就能为宝爸宝妈们减轻很大一部分负担,当然有迪辅乐DHABb-12益生菌油滴剂就能让实现沉浸式带娃更进一步,也能让宝爸宝妈们能节省下更多的时间调整自己,以优雅从容的状态陪伴宝宝...

  • 免费模式仍被收取流量费 Facebook Free Basics服务遭吐槽

    然而据《华尔街日报》报道,即使启用了应用程序的“免费模式”,许多人还是被手机运营商收取了“少量费用”...可知在截止 2021 年 7 月的前一年,这部分用户每月总计被收取了数百万美元...公司内部文件描述称:当用户处于免费模式,并认为自己有被运营商网络所覆盖时,事实上还是为这部分数据流量而自行承担了费用...2016 年的时候,Facebook 曾因在印度推出“免费互联网服务”,而遭到互联网权利组织的批评...当时 Facebook 已在 36 个市场提供了这项服务,但印度地区仅过一个月就被拉闸......

  • PCIe 5.0 SSD还得等半年!十铨加入 读取超13GB/s

    根据目前披露的信息,这款SSD采用标准的M.2 2280形态,覆盖锯齿形大型散热片,最大容量4TB,顺序读取速度最高超过13GB/s,顺序写入最高也超过了12GB/s...虽然读取不如威刚等的14GB/s,但是写入速度依然是顶级水平...技术方面,它还支持新一代NVMe 2.0协议...到时候,同样支持PCIe 5.0的AMD Zen4架构也发布了...

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天