十一月
27

JavaScript获取微软Bing.com每日首页大图

微软的Bing必应搜索引擎每天都会更换首页的背景大图(大图?其实也不大,连笔记本桌面背景都不能用)。这些图片非常漂亮,我们其实可以拿来留作他用的。

如果要在自己博客使用该怎么办呢?

微软提供了一个返回xml格式数据的接口。由于浏览器安全的设置,直接通过JavaScript跨域远程调用貌似不可以(是不是这样呢?我搞了好久没成功)。而服务器端则不存在这个问题,所以我使用php将其解析重新打包成了一个返回json数据的接口,放到了我的服务器上,并且简单写了个JavaScript调用方法。如果你对这些图片有兴趣,不妨试试。

首先介绍下我的服务器接口

接口地址就是http://www.qiqiboy.com/bingimage.php

默认返回一张图片的json数据。

支持三个参数:

返回的json数据经解析后会是一个JS数组,数组的每个元素代表一张图片的相关信息。其中imgurl是图片的地址,title是图片的标题,desc是图片的描述。

了解了这个接口你也可以自行通过JavaScript或者其他方式来访问这个接口。


提供一个简单的JavaScript跨域获取方法

由于接口在我服务器上,涉及到跨域通信安全问题,所以你不能直接通过XMLHttpRequest对象来获取,我推荐使用JS动态加载方法来实现。

我写了个实现最基本的操作的JS脚本,支持三个参数,前两个即为固定的几天之前和图片数量,第三个为回调函数。代码如下,我并提供了两个简单的列子:

function getBingImage(idx,number,callback) {//callback为回调函数,即数据获取成功后的操作
    var js=document.createElement('script'),rand=parseInt(Math.random()*100000000);
    js.setAttribute('type', 'text/javascript');
    js.src='http://www.qiqiboy.com/bingimage.php?idx='+(idx?idx:0)+'&number='+(number?number:1)+'&varname=imgs_'+rand;
    js.onload = js.onerror = js.onreadystatechange = function () {
        if (js && js.readyState && js.readyState != "loaded" && js.readyState != "complete") {
            return;
        }
        callback(window['imgs_'+rand]);
        js.onload = js.onreadystatechange = js.onerror = null;
        js.parentNode.removeChild(js);
        js = null;
    };
    document.getElementsByTagName('head')[0].appendChild(js);
}
 
/* 例子1:先熟悉下返回的数据格式 */
getBingImage(0,1,function(data){
        alert(data[0].imgurl);
        alert(data[0].title);
        alert(data[0].desc);
});
 
 
/* 例子2:获取当天开始的五张图片并显示出来 */
getBingImage(0,5,mydo);
 
function mydo(data){//此函数即为回调函数,参数data即为得到的图片数组
    for(var i=0;i<data.length;i++)//将图片全部显示出来
        $('bingimg').innerHTML+='<img width="300" height="200" alt="'+data[i].desc+'" title="'+data[i].title+'" src="'+data[i].imgurl+'"/>';
}
 
 
/* 例子3:获取最新的一张图片当做id为bingimg的节点的背景图片 */
function setBg(data){
    document.getElementById('bingimg').background='url(data[0].imgurl) center center no-repeat';
}
 
getBingImage(0,1,setBg);

最后提供一个demo,可以自行查看下载。

地址在此

bing

本文标签: , , , ,

分享

本文短网址: http://qiqi.boy.im/9r

这篇文章已经有 30 条评论

Comments (29) Trackbacks (1)
You can leave a response or Trackback this entry .
  1. liuqiqi -#1

    美美的沙发。。。 :grin:

  2. 万戈 -#2

    太高深,代码是看不懂了,我就看看这图片吧,demo里的PP确实不错呀

  3. 小年 -#3

    好深奥,QIQI很爱学习呀。

  4. MOPVHS -#4

    原生js越看越喜欢~~~前排支持!

  5. Ray Chow -#5

    这个我也试过,但图片真的是太小了

  6. Mutnyy -#6

    这个很有意思啊 :grin:

  7. winy -#7

    伸手求php部分,拿来放自己服务器上 :razz:
    看看拿来放主题里用,虽然很小,做个头部还是可以吧

  8. 沦落成美 -#8

    高深啊 要图片干嘛嘞

  9. Alan -#9

    上 bing 不到 5 次,刚开始完全不知首页大图是个啥,看了 Demo,哦。。。 :!:

  10. zwwooooo -#10

    bing图片很赞的,不过搜索就一塌糊涂

  11. Dianso -#11

    其实这个图不算太大,我1600*900都桌面只能平铺了

  12. 郭丽彬 -#12

    感觉这个还是不要去占他们的便宜,搞不好会若麻烦的,尤其是版权问题

  13. 小邪 -#13

    958×512的图,╮(╯▽╰)╭,表示有点点迷茫。
    不知道拿来做啥。
    唔,要不拿去做手机壁纸好了。

  14. 左旋肉碱 -#14

    这个目标该怎么实现呢

  15. serafin -#15

    哈,一搜资料就搜到博主这里来了,按完文章留个脚印~

  1. 终极完美版javascript获取并限制调整图片尺寸

    [...] 下面提供几张图片,图片来源于《JavaScript获取微软Bing.com每日首页大图》中方法得到的Bing的美丽图片。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: