自建虾米音乐搜索

<button>搜索</button>

加载jQuery库文件


添加获取搜索结果的异步事件,增加搜索框回车快捷获取结果效果。第7行用于清除播放器代码显示结果,以防是得到播放器显示结果后重新搜索。第10行用于当搜索结果时不加载载入更多代码。

function search() {
  $.ajax({
      url: "http://www.xiami.com/app/nineteen/search/key/"+$('#text').val()+"/page/"+$('#page').val(),
      type: "get",
      dataType: "jsonp",
      success: function(data, status) {
                  $('#show').html('');
                  $("#list").css('display','block'); 
                  if(data.total / 8 != 1) {
                    $('#navi').html('
载入更多
'); } $.each(data.results, function(i,item){ $('

'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'

').appendTo('#result'); }); }, error: function() { alert('failed!'); } }); } //当点击搜索按钮时先清除结果显示防止是重新搜索,然后再一步加载搜索结果 $('button').click(function(){ $("#result").html(''); search(); }); //搜索框回车时触发搜索按钮点击事件 $("body").keydown(function() { if (event.keyCode == "13") { $('button').click(); } });

增加点击歌曲名获取歌曲播放器代码事件,先是在页面中显示播放器,再用一个textarea框显示引用代码,并增加了当textarea框获得焦点时自动全选框内代码效果。

function show(id) {
    //搜索结束搜索起始页面自动返回到1
    $('#page').val('1');
    $('#list').css('display', 'none');
    var html = '';
    $("#show").html(html);
    $("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}

-->

预览

预览地址:虾米音乐搜索  主要目的是搜索音乐并获取播放器代码

原理

本段代码主要利用了http://www.xiami.com/app/nineteen/search/key/搜索内容/page/搜索结果页数虾米这个隐藏的API,例如http://www.xiami.com/app/nineteen/search/key/传奇/page/1可以获取到搜索结果总数已经相关歌曲的信息等。

简单的思路是搜索框输入搜索信息点击搜索AJAX载入API搜索结果并返回给页面解析显示,单击一条歌曲时根据搜索结果获得的歌曲ID返回播放器代码。

代码分析

首先是基本的HTML代码

<input type="text" id="text" value="" />
<input type="hidden" id="page" value="1" />

<button>搜索</button>

加载jQuery库文件


添加获取搜索结果的异步事件,增加搜索框回车快捷获取结果效果。第7行用于清除播放器代码显示结果,以防是得到播放器显示结果后重新搜索。第10行用于当搜索结果时不加载载入更多代码。

function search() {
  $.ajax({
      url: "http://www.xiami.com/app/nineteen/search/key/"+$('#text').val()+"/page/"+$('#page').val(),
      type: "get",
      dataType: "jsonp",
      success: function(data, status) {
                  $('#show').html('');
                  $("#list").css('display','block'); 
                  if(data.total / 8 != 1) {
                    $('#navi').html('
载入更多
'); } $.each(data.results, function(i,item){ $('

'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'

').appendTo('#result'); }); }, error: function() { alert('failed!'); } }); } //当点击搜索按钮时先清除结果显示防止是重新搜索,然后再一步加载搜索结果 $('button').click(function(){ $("#result").html(''); search(); }); //搜索框回车时触发搜索按钮点击事件 $("body").keydown(function() { if (event.keyCode == "13") { $('button').click(); } });

增加点击歌曲名获取歌曲播放器代码事件,先是在页面中显示播放器,再用一个textarea框显示引用代码,并增加了当textarea框获得焦点时自动全选框内代码效果。

function show(id) {
    //搜索结束搜索起始页面自动返回到1
    $('#page').val('1');
    $('#list').css('display', 'none');
    var html = '';
    $("#show").html(html);
    $("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}

利用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>

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

利用API制作相册展页

上一篇提到了本人为ImageVue写的一个API,这一篇将给大家提供一个实例,使大家能够更明白的了解和使用这个API.

将下面的内容保存成PHP文件后上传到服务器访问即可,只是简单的做了照片的读取,没有做过多的修饰。有心情的可以根据API做个分页以及JS和CSS方面的修饰。预览地址:点击这里


  ul {
    margin:0 auto;
  } 
  li {
    display:inline;
  }
</style>
';
  switch($_GET['page']) {
    case 'photo':
      $photos = file_get_contents($api . 'get.photos&name=' . $_GET['album']);
      $photos = json_decode($photos, true);
      foreach($photos as $item) {
        echo '
  • '; echo '' . $item['title'] . ''; echo '
  • '; } break; default: $gallery_name = file_get_contents($api . 'get.gallery.name'); $gallery_name = json_decode($gallery_name, true); foreach($gallery_name as $item) { $gallery_info = file_get_contents($api . 'get.gallery.info&name=' . $item); $gallery_info = json_decode($gallery_info, true); $preview = file_get_contents($api . 'get.photo&album=' . $item . '&photo=' . $gallery_info['previewimage']); $preview = json_decode($preview, true); if($preview['thumbnail'] != "") { echo '
  • '; echo '
      '; echo '
    1. ' . $preview['title'] . '
    2. '; echo '
    3. ' . $gallery_info['title'] . '(' . $gallery_info['fileCount'] . ')' . $gallery_info['description'] . '
    4. '; echo '
    '; echo '
  • '; } } break; } echo '';

    大家还可以做成WP或者Typecho的博客页面,如果不懂得制作的,可以自行谷歌一下,很简单的!

    ImageVue API

    这两天突发奇想想要给imagevue做一个API接口出来,这样站外引用什么的就好做多了。简单的应用比如在博客中插入相册或者最近上传照片的RSS挂件什么的都变得轻而易举了。开始想用树形文件夹的遍历来获取数据的,然后发现imagevue有将所有的信息都存储在xml文件里,犹如发现新大陆啊。API返回的数据要么是json要么是字符串,没有将其整理成标准的XML格式,原因很简单,我对XML的格式其实也不太熟o(╯□╰)o

    我在Google Code上创建了这个项目,需要的同学可以去参观一下:点击这里

    API文件下载地址:下载一 

    API参数说明:点击这里

    若不能下载的可以保存下面的源码为api.php上传到相册根目录即可使用

    最后如果有什么想法或者建议请一定要联系我!谢谢

    相关文章:利用API制作相册展页 | 利用API制作相册展页[JQuery版]

    站外引用微博客最新消息

    首先要声明的是,这个方法不是我原创的啦!感谢Jerry的倾力支持!这里只是对其进行论述介绍而已。还有就是,我已经到家啦!但是由于这两天上网不方便,所以现在才更新,以后不会啦!

    这里需要用到两个文件,请大家到这里下载:传送门

    下载下来后解压出两个文件,分别为api.php和read.php。首先我们要将api.php上传到PageCookery安装的根目录,也就是和config.php同级的目录。然后是修改read.php文件的第8行:

    1 define(P2_PATH,'http://imnerd.org/mblog/');

    将“http://imnerd.org/mblog”修改为你的微博客地址之后保存read.php(注意不要忘记最后的“/”)。然后将read.php上传到你要调用你微博客最新消息的那个文件的同级目录(比如你想要在WordPress首页调用自己微博客最新日志的话,就将read.php上传到WP的根目录中,即与首页文件index.php同级)。然后在你想要调用最新消息的文件中添加如下代码:

    1 <?php 2 require_once("read.php"); 3 echo readit(); 4 ?>

    当然,如果你的read.php上传的地址不是跟调用文件同级的话,这里的read.php就要改成相应的相对路径了。完成这些,你就可以在微博客外引用你的最新消息了。如果你想在WordPress的边栏引用的话需要安装能让sidebar运行PHP语言的小工具,具体可以上WP论坛搜索一下。

    如果你想要调用多个微博客的最新日志的话,你需要进行如下的设置:

    首先,你要确定你想要调用最新日志的微博客的根目录都有api.php文件存在;然后我们要试着修改read.php文件,首先你要为你要获取最新日志的微博客定义地址,将第8行复制并修改,这里以我的微博客为例:

    1 define($P2_PATH[],'http://imnerd.org/mblog/'); 2 define($P2_PATH[],'http://lizheming.cn/'); 3 define($P2_PATH[],'http://.../'); 4 define($P2_PATH[],'http://.../');

    P2_PATH_1这个变量可以自己定义,但是之后填写的要与之对应,后面单引号之间的网址则填写你想要引用最新消息的微博客的地址,你想要调用多少个微博客的最新消息则需要定义多少个变量。然后要定义读取函数,将29行复制并修改,这里还是以我的微博客为例:

    1 function readit($host) 2 { 3 $request = $host . ’api.php’; 4 $result = pcurl( $request ); 5 if ($result) return $result; 6 else return false; 7 }

    如刚才所述,P2_PATH_1这些变量的名称必须与之前你定义的变量名称对应,然后是函数名称readit()也可以随自己定义,但是不能重复,而且之后的填写要与之对应。同样还是你要调用多少个微博客的最新日志就要定义多少个读取函数。这些都编辑好之后保存你的read.php文件并上传到你想要调用最新消息的页面的同级目录,并修改想要调用最新消息的页面,增加如下语句:

    1 foreach ($P2_PATH AS $key => $host) 2 { 3 readit($host); 4 }

    这里需要注意的就是readit()调用函数必须与你之间定义的对应才行!好了,保存页面就可以观看到效果了。具体实例可以登录怡红院落首页怡红别院观察。大家可以发挥自己的DIY精神,将自己的调用消息美化一下,那么简单的站外引用插件 for PageCookery 就做好啦!

    PS:感谢explon打架本博客为站外引用方案做了更加完美的优化!