前端开发

如何使用Flickr的API

首先要去申请Flickr API Key， 分为商业通途和非商业用途。

Flickr API Key Application Application

通常大家会get方式获得图片列表，如访问下述地址会获得json格式的图片列表

http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos
&api_key=[your api key here]&photoset_id=[your photoset id here]&format=json&per_page=20
$(function(){
       $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=[your api key here]&photoset_id=[your photoset id here]&format=json&per_page=20&jsoncallback=?',
        function(data){
            //loop through the results with the following function
            $.each(data.photoset.photo, function(i,item){
            	var str = "";
                //build the url of the photo in order to link to it
                var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
                var href = 'http://www.flickr.com/photos/' + data.photoset.owner + '/' + item.id;
                str += '

阅读全文 >>

在使用facebook的visible-to-connection时，如何隐藏空白

在使用facebook的visible-to-connection是，因为使用的是visibility:hidden而不是display:none，所以使用有大片的空白出现（facebook真是弱X）。

<fb:fbml version="1.1">
    <fb:visible -to-connection>
            [form code]
    <fb:else>
             <img src="image_location.jpg" id="not-a-fan" />
    </fb:else>
    </fb:visible>
</fb:fbml>

如果使用上面的代码，会发现jpg上面有大量的空白，那是form的位置，怎么隐藏form呢？答案是使用绝对定位。

<style type="text/css">
    #wrapper {
        position: relative;
    }
    #not-a-fan {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="wrapper">
<fb:fbml version="1.1">
    <fb:visible -to-connection>
            [form code]
    <fb:else>
             <img src="image_location.jpg" id="not-a-fan" />
    </fb:else>
    </fb:visible>
</fb:fbml>
</div>

这下就巧妙的去除留白了。

阅读全文 >>

DIV覆盖Flash的方法

最近做了个项目，需要把DIV层放到Flash上面，CSS的z-index属性是不起作用的，有人找到了官方解释。

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order (”z-index”) of those layers.

在网上查查，结果发现其实有很多方法的，试了几种，其实能用的不多，很多方法都有这样那样的问题，最后发现下面两种兼容性最好。

第一种：设置 Flash为 透明

阅读全文 >>

CSS 跨浏览器解决方案之二渐变

渐变效果也是常用的效果之一，因为浏览器兼容性的原因，很多人都是用背景图片来达到渐变效果的，其实仅仅使用 CSS 就可以实现了。

.gradient {
	/* Firefox 3.6 */
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
 
	/* Safari & Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));
 
	 /* IE6 & IE7 */
	filter:  progid :D XImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

阅读全文 >>

CSS 跨浏览器解决方案之一透明度

很多程序员都很奇怪，为什么IE就是就是不支持 opacity 这个属性呢？这个问题已经存在很长很长时间了，其实 opacity 是 CSS3 的属性，虽然IE不提供支持，但是IE可以通过专用的过滤器属性提供类似的透明度设置。

是不是很奇怪，为什么 IE 就是和别人不一样呢？

#myopacity {
    /* other browsers */
    opacity: 0.4;
    /* this works in IE6, IE7, and IE8 */
    filter: progid :D XImageTransform.Microsoft.Alpha(opacity=40);
    /* this works in IE8 only */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
}

阅读全文 >>

全世界最短的IE判定

以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。

var ie = !+”\v1″;

仅仅需要7bytes！参见这篇文章，《32 bytes, ehr … 9, ehr … 7!!! to know if your browser is IE》，讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 bytes!的故事

但这纪录今年1月8日被一个俄国人打破了，现在只要6 bytes!它利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器，如果数组里面最后一个字符为逗号，JS引擎会自动剔除它。

var ie = !-[1,];
alert(ie);

如果从非IE的角度判定，可以省一个比特，因为我们做兼容时，绝大多数情况都是IE与非IE地开工。

if(-[1,]){
     alert("这不是IE浏览器！");
}else{
     alert("这是IE浏览器！");
}

阅读全文 >>
较旧的文章