Haorooms博客-前端博客-前端技术，记录web前端开发的技术博客

javascript判断浏览器是否支持某一个CSS3属性

2014年9月15日

1、引子

css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。

2、检测方法

下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性：

/**
 * 判断浏览器是否支持某一个CSS3属性
 * @param  {String} 属性名称
 * @return {Boolean} true/false
 * @version 1.0
 */

function supportCss3(style) {
    var prefix = ['webkit', 'Moz', 'ms', 'o'],
        i,
        humpString = [],
        htmlStyle = document.documentElement.style,
        _toHumb = function (string) {
            return string.replace(/-(\w)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
        };

    for (i in prefix)
        humpString.push(_toHumb(prefix[i] + '-' + style));

    humpString.push(_toHumb(style));

    for (i in humpString)
        if (humpString[i] in htmlStyle) return true;

    return false;
}

[阅读更多]

AngularJS入门和快速开始

2014年9月14日

对于AngularJS，是一门比较新的技术，我在知道它比较强大，但是我也只是自学了一点点，属于AngularJS的新手，真正的大项目中也没有用到AngularJS，但是我对AngularJS还是比较喜欢的。下面分享一下，新手如何快速开始和入门AngularJS！

Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

1、使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。

2、将下面的源代码复制到您的HTML文件。

3、在web浏览器中打开这个HTML文件。

源代码

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

<html ng-app>

这行载入AngularJS脚本：

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

Hello {{'World'}}!

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

[阅读更多]

是谁造就了凌晨、雨天打车难的现状？

2014年9月13日

上海交通大学9月13号是新生报到的日期。我老婆的表妹，今年考上了上海交通大学。9月12号晚上，我们带着表妹去外滩逛。当我们沿着新开河路走到了人民路路口的时候，天宫不作美，零星的小雨大了起来！

没办法，只能打车。面对一辆辆疾驰而过的出租车，大多数里面坐了人，但是也有几辆空车迎面而过，但是面对我们招手，并无停下的意思，还是疾驰而过！没办法，我开始用打车软件叫车，但是因为我只是叫车到附近的地铁站，因为路程太短，又无小费，没有一辆出租车接单。

无奈之下，我们冒雨花20多分钟走到了地铁站，坑爹的赶上了最后一班地铁。

面对此次打车，我没有多想，因为平时感觉上海打车还是比较好打的。不管用什么方式打车，打车还是比较方便的。

上了地铁，时间已经是十点四十多分。老婆因为晚上公司还有活动，坐地铁又回了公司，我和表妹还有姨夫回了家。

今天上午，老婆抱怨说，凌晨打车真难打，他们整个公司一起打车，有用软件的，用扬招的。没有一个人能打到出租车！老婆的同事说，因为酒吧离他们公司比较近，没有司机愿意凌晨来接这样的单子，凌晨，司机们只接远的单子，近距离的单子必须用打车软件，还必须用加小费才愿意载你，没办法，老婆的同事们用打车软件并加了5到10元的小费，才叫到了出租车！

[阅读更多]

javascript回到顶部滑动效果及点击导航滑动到相应热点的效果

2014年9月12日

今天有个朋友问我网站回到顶部滑动效果是如何实现的。还有我个人介绍中滑动效果。

今天我总结一下javascript,jquery滑动效果的实现。其实代码很简单，回到顶部的代码就一句话就可以实现！

$("body,html").animate({scrollTop:0},500);

用jquery animate()方法，scrollTop到0，用500毫秒的时间。

假如，你想用ID标签做热链接，也就是 href="#ID"这种方法滑动的话，也很简单

写一个click时间就可以了

$("#a标签").click(function(){
    var href=$(this).attr("href");
    var top=$(href).offset().top;
    $(this).blur();
    $("body,html").animate({scrollTop:top},500);
    return false;
})

[阅读更多]

HTML常用的特殊符号总结

2014年9月12日

html中经常会用到一些特殊符号，例如箭头，雪花，心形等等，这些符号就不用css样式或者图片来写了，直接用html特殊符号可以实现。

例如，如下html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms前端博客之特殊符号</title>
</head>
<body>
    &#8672 
    &#9728 
</body>
</html>

在网页中显示如下

使用方法：

这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；
第二列可以用于CSS文件中，但是需要用反斜杠\转义；
第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。

[阅读更多]