Be a Pure Person, Enjoy a Simple Life

分类 NOTES 下的文章

12月 02

各大平台免费接口

  电商接口

  京东获取单个商品价格接口:

  

http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1

  ps:商品ID这么获取:http://item.jd.com/954086.html

  物流接口

  快递接口:
  

http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号

  ps:快递公司编码:申通=”shentong” EMS=”ems” 顺丰=”shunfeng” 圆通=”yuantong” 中通=”zhongtong” 韵达=”yunda” 天天=”tiantian” 汇通=”huitongkuaidi” 全峰=”quanfengkuaidi” 德邦=”debangwuliu” 宅急送=”zhaijisong”

  

谷歌接口

  FeedXml转json接口:

  

http://ajax.googleapis.com/ajax/services/feed/load?q=Feed地址&v=1.0

  备选参数:callback:&callback=foo就会在json外面嵌套foo({})方便做jsonp使用。

  备选参数:n:返回多少条记录。

  天气接口

  百度接口:

  

http://api.map.baidu.com/telematics/v3/weather?location=嘉兴output=json&ak=5slgyqGDENN7Sy7pw29IUvrZ

  location:城市名或经纬度 ak:开发者密钥 output:默认xml

  气象局接口:

  

http://m.weather.com.cn/data/101010100.html

  音乐接口

  虾米接口

  

http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/歌曲当前页?_=当前毫秒&callback=getXiamiData

  QQ空间音乐接口

  

http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?uin=QQ号码&json=1&g_tk=1916754934

  QQ空间收藏音乐接口

  

http://qzone-music.qq.com/fcg-bin/fcg_music_fav_getinfo.fcg?dirinfo=0&dirid=1&uin=QQ号&p=0.519638272547262&g_tk=1284234856

  多米音乐接口

  

http://v5.pc.duomi.com/search-ajaxsearch-searchall?kw=关键字&pi=页码&pz=每页音乐数

  soso接口

  

http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w=关键字&perpage=1&ie=utf-8

  视频接口

  土豆接口

  

http://api.tudou.com/v3/gw?method=album.item.get&appKey=Appkey&format=json&albumId=视频剧集ID&pageNo=当前页&pageSize=每页显示

  地图接口

  阿里云根据地区名获取经纬度接口

  

http://gc.ditu.aliyun.com/geocoding?a=苏州市

  参数解释: 纬度,经度type 001 (100代表道路,010代表POI,001代表门址,111可以同时显示前三项)

  阿里云根据经纬度获取地区名接口

  

http://gc.ditu.aliyun.com/regeocoding?l=39.938133,116.395739&type=001

  IP接口

  新浪接口(ip值为空的时候 获取本地的)

  

http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=218.4.255.255

  淘宝接口
  

http://ip.taobao.com/service/getIpInfo.php?ip=63.223.108.42

  手机信息查询接口

  淘宝网接口

  

http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号

  拍拍接口
  

http://virtual.paipai.com/extinfo/GetMobileProductInfo?mobile=手机号&amount=10000&callname=getPhoneNumInfoExtCallback

  百付宝接口

  

https://www.baifubao.com/callback?cmd=1059&callback=phone&phone=手机号

  115接口

  

http://cz.115.com/?ct=index&ac=get_mobile_local&callback=jsonp1333962541001&mobile=手机号

  有道接口

  

http://www.youdao.com/smartresult-xml/search.s?jsFlag=true&type=mobile&q=手机号

  手机在线接口

  

http://api.showji.com/Locating/www.showji.com.aspx?m=手机号&output=json&callback=querycallback

  视频信息接口

  优酷

  

http://v.youku.com/player/getPlayList/VideoIDS/视频ID

(比如 http://v.youku.com/v_show/id_XNTQxNzc4ODg0.html的ID就是XNTQxNzc4ODg0)

  翻译、词典接口

  腾讯

  

http://dict.qq.com/dict?q=词语

  腾讯的部分接口

  获取QQ昵称和用户头像

  

http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=QQ
08月 26

我把ubuntu的密码忘了!

哎~
好久不用,把ubuntu的密码给忘了,啷个子办呢?!

你是不是也有同样的烦恼呢?
不用着急,不用着急,一起跟我做...

Step 1:
开机,狂按ESC,有木有看到这个界面?
Step 1
选中 高级模式,是的 带*好的那个,回车;

Step 2:
进入Recovery Mode,就是下面这个样子滴;
Recovery Mode
继续回车;

Step 3:
有木有看到下面这个界面,
请输入图片描述
不用犹豫,选择 root的那个,回车;

Step 4:
有木有看到底部有一个 root@ubuntu:~#;

输入 “mount -o rw,remount /”,一定不要漏了哦,不酱紫的话,你会改~不~了~的。。。。因为它是Read-only的;
然后呢,
输入: passwd jushu;好吧 junshu是我的用户名,你得换成你自己的。
回车吧,接下来应该~你懂的^_^

纳尼?你忘了你的用户名了?
试试这个:cat /etc/passwd 有木有看到你熟悉的那个名字~

好了,就酱紫了,这事儿不能说得再细了。

01月 20

什么是响应式Web设计?怎样进行?

响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式Web设计的概念

Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design",文中援引了响应式建筑设计的概念:

最近出现了一门新兴的学科——"响应式建筑(responsive
architecture)"——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产"智能玻璃":当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。

将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。

显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。

调整分辨率

不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于横屏(portrait),有些是竖屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况?

请输入图片描述

要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且很多用户甚至不去将浏览器的窗口最大化;类似这样的变数,我们还要考虑多少呢?

Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图展示了大致的统计结果:

请输入图片描述

在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着"多方案"的思路继续走下去;那么我们应该怎样做呢?

部分解决方案:一切弹性化

几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。

现在,我们可以通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。

在前文提到的Ethan Marcotte的文章中,他通过一个实例展示了响应式Web设计在页面弹性方面的特性:

请输入图片描述
该实例的实现方式完美的结合了液态网格和液态图片技术,并且聪明的在正确的地方使用了正确的HTML标记。"液态网格"是一种很常见的实践方式;对于"液态图片"技术,下面的文章做了不错的介绍:

Hiding and Revealing Portions of Images

Creating Sliding Composite Images

Foreground Images That Scale With the Layout

说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》,或是下载个样章先:"怎样创建弹性图片"。另外,Zoe的这篇"Essential Resources for Creating Liquid and Elastic Layouts."提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。

从技术角度讲,虽然听上去这些都简单可行,但它比"将这些功能结合在一起"要复杂些。举个例子,仔细观察Ethan Marcotte提供的实例中的logo图片:

请输入图片描述

如果我们将浏览器窗口不断调小,会发现logo图片的文字部分始终会保持同比缩小,保证其完整可读,而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分:插图作为页面标题的背景图片,会保持尺寸,但会随着布局调整而被裁切;文字部分则是一张单独的图片。

<h1 id="logo">

  <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a>

</h1>

其中,<h1>元素使用插图作为背景,文字部分的图片始终保持与背景的对齐。

这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短,并且logo文字最终会变的小到难以识别,背景图片也会被过多的裁切。

弹性图片

响应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。

img { max-width: 100%;}
只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的CSS Media Query for Mobile is Fool's Gold一文中提到的,"液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。" 一种简而美的方法。

图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。

响应式图片

由Filament Group提出的"响应式图片"技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

responsive-web-design-flexible-image-filamentgroup

这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片",并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。

禁用iPhone中的图片自动缩放

在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示。

responsive-web-design-iphone

我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章):

<meta name="viewport" content="width=device-width; initial-scale=1.0">

将initial-scale的值设定为"1",即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹果官方的文档。

打造布局结构

当页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表,或者更有效的,使用CSS media query。这不会引起多大的麻烦,多数样式设定不会被影响和改变,只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。

我们可以使用一个默认主样式表来定义页面的主要结构元素,比如#wrapper、#content、#sidebar、#nav等的默认布局方式,以及一些全局性的配色和字体方案。

我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:

下面的代码可以放在默认主样式表style.css中:

/* Default styles that will carry to the child style sheet */

html,body{

   background...

   font...

   color...

}


h1,h2,h3{}

p, blockquote, pre, code, ol, ul{}


/* Structural elements */

#wrapper{

    width: 80%;

    margin: 0 auto;

    background: #fff;

    padding: 20px;

}


#content{

    width: 54%;

    float: left;

    margin-right: 3%;

}


#sidebar-left{

    width: 20%;

    float: left;

    margin-right: 3%;

}

#sidebar-right{

    width: 20%;

    float: left;

}

下面的代码可以放在子级样式表mobile.css中,专门针对移动设备进行样式覆写:

#wrapper{

    width: 90%;

}


#content{

    width: 100%;

}


#sidebar-left{

    width: 100%;

    clear: both;


    /* Additional styling for our new layout */

    border-top: 1px solid #ccc;

    margin-top: 20px;

}


#sidebar-right{

    width: 100%;

    clear: both;


    /* Additional styling for our new layout */

    border-top: 1px solid #ccc;

    margin-top: 20px;

}

大致的视觉效果如下图所示:

responsive-web-design-moving-structure

Media Queries

CSS3支持CSS2.1所支持的所有媒体类型,例如screen、print、handheld等,同时添加了很多涉及媒体类型的功能属性,包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向,横屏或竖屏)和color。在CSS3发布之后出现的新玩具,如iPad或Android相关设备,都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式,而忽略那些不支持CSS3的台式机中的旧浏览器。

在Ethan的文章中,我们能看到一段media query使用实例:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过480px,则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息,可以参考"The Orientation Media Query"一文。

我们可以创建多个样式表,以适应不同设备类型的宽度范围。Ethan的文章中的"Meet the media query"部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中:

/ Smartphones (portrait and landscape) ----------- /

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/ Styles /

}

/ Smartphones (landscape) ----------- /

@media only screen

and (min-width : 321px) {

/ Styles /

}

/ Smartphones (portrait) ----------- /

@media only screen

and (max-width : 320px) {

/ Styles /

}
上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式,与通过media queries调用不同样式表的方式之间的区别与联系,可以参考"Hardboiled CSS3 Media Queries"一文。

CSS3 Media Queries

上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值,不久的将来则一定会全部派上用场。

min-width和max-width这两个属性很靠谱。通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之。

下面的几个示例中,我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述,这样做更加高效,减少请求数量。

@media screen and (min-width: 600px) {

 .hereIsMyClass {

      width: 30%;

      float: right;

 }

}
上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。

@media screen and (max-width: 600px) {

 .aClassforSmallScreens {

      clear: both;

      font-size: 1.3em;

 }

}
而这段代码的作用则相反:aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。

可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候,我们希望通过media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用min-device-width与max-device-width,用来判断设备本身的屏幕尺寸。

@media screen and (max-device-width: 480px) {

 .classForiPhoneDisplay {

      font-size: 1.2em;

 }

}
@media screen and (min-device-width: 768px) {

 .minimumiPadWidth {

      clear: both;

      margin-bottom: 2px solid #ccc;

 }

}
还有一些其他方法,可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章:

CSS for iPhone 4 (Retina display)

How To: CSS for the iPad

对于iPad来说,orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。

@media screen and (orientation: landscape) {

 .iPadLandscape {

      width: 30%;

      float: right;

 }

}

@media screen and (orientation: portrait) {

 .iPadPortrait {

      clear: both;

 }

}
不幸的是,这个属性目前确实只在iPad上有效。对于其他可以转屏的设备,譬如iPhone,可以使用min-device-width和max-device-width来变通实现;详情可以参考"Determine iPhone orientation using CSS"一文。

我们还可以将上述属性组合使用,来锁定某个屏幕尺寸范围:

@media screen and (min-width: 800px) and (max-width: 1200px) {

 .classForaMediumScreen {

      background: #cc0000;

      width: 30%;

      float: right;

 }

}
上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。

其实,很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />

<link rel="stylesheet" media="print" href="print.css" />

所以呐,凡事没有绝对,最好根据实际情况决定使用media queries的方式。比如,对于iPad,我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向,这种情况下,要保证页面在极短的时间内响应屏幕尺寸的调整,我们必须选择效率最高的方式。

JavaScript

JavaScript也是我们的武器之一,特别是当某些旧设备无法完美支持CSS3的media query时,它可以作为后备支援。幸运的是,已经有专门的JS库来帮助旧浏览器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很简单,下载css3-mediaqueries.js并在你的页面中调用它。

而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度,并为不同的情况调用不同的样式表:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $(window).bind("resize", resizeWindow);

        function resizeWindow(e){

            var newWindowWidth = $(window).width();


            // If width width is below 600px, switch to the mobile stylesheet

            if(newWindowWidth < 600){
                 $("link[rel=stylesheet]").attr({href : "mobile.css"});
                 }             // Else if width is above 600px, switch to the large stylesheet
             else if(newWindowWidth > 600){

                $("link[rel=stylesheet]").attr({href : "style.css"});

            }

        }

    });

</script>

类似这样的解决方案还有很多。所以我们要清楚,media queries不是一个绝对唯一的答案,它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript,我们则可以实现更多的变化。这篇"Combining Media Queries and JavaScript"向我们展示了JavaScript配合media queries的更多细节信息。

显示或隐藏内容

通过前文的学习,我们已经了解到,对于响应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方法。但是对于页面中的文字内容信息来说,则不能简单的只从"同比缩小"和"调整布局结构"这两方面去处理。对于手机等移动设备来说,在文字内容方面,已经有了很多最佳实践方式和指导原则:简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

responsive-web-design-digg-app

响应式Web设计的思想,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另一方面,则是增强可读性和易用性,帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

有一条样式代码,我们已经使用了多年:

display: none;
我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也可以使用前文的方法,通过JS判断当前硬件屏幕规格,在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如,对于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一个简单的导航结构,其中的导航元素可以指向详细内容页面。

注意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说,避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例:

![responsive-web-design-content][14]

图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:

    <p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>
    
    
    <div id="content">
    
        <h2>Main Content</h2>
    
    </div>
    
    
    <div id="sidebar-left">
    
        <h2>A Left Sidebar</h2>
    
    
    </div>
    
    
    <div id="sidebar-right">
    
        <h2>A Right Sidebar</h2>
    
    </div>

下面是默认的主样式表,其中,我们要隐藏掉链接导航部分(sidebar-nav),因为默认样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。

#content{

    width: 54%;

    float: left;

    margin-right: 3%;

}


#sidebar-left{

    width: 20%;

    float: left;

    margin-right: 3%;

}


#sidebar-right{

    width: 20%;

    float: left;

}

.sidebar-nav{display: none;}

下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并使sidebar-nav显示出来。借助JavaScript,当用户点击sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变侧边栏的display属性值,也可以为其添加额外的布局样式。

#content{

    width: 100%;

}


#sidebar-left{

    display: none;

}


#sidebar-right{

    display: none;

}

.sidebar-nav{display: inline;}

现在,我们的页面已经可以随着设备和屏幕规格的变更,响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备,我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如,针对手机设备,使用一个特定的样式,将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读:

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

触屏与鼠标

触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品,比如手机,但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t,即使用传统的键鼠设备,同时也加入了触屏技术。

responsive-web-design-touchscreen

相比于传统的基于鼠标指针的互动,触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸,要使我们的设计方案同时满足这两类设备的规范,并非一件难事,只是有些地方需要注意。比如,触屏设备无法反映CSS定义的hover行为及相应的样式,因为它没有鼠标指针的概念,手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

有兴趣的话,可以读读这篇"Designing for Touchscreen",这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。

01月 27

用户不愿注册的8个原因

对于大多数用户来说,网站注册是一个非常大的负担。用户注册你的网站等同于将自己的个人信息交给你并且信任你能够保护它的安全。如果你滥用他们的个人信息或侵犯了他们对你的信任,那你很容易失去你的用户。现在,许多用户都对他们提交的个人信息感到担忧,在处处隐藏着黑客和垃圾邮件满天飞的网络世界里,谁又能够制止他们的胡作非为呢?如果你的网站上用户注册登录数量不多的话,那说明你的网站还没得到用户的信任。以下列举的是用户不愿注册的8个原因:


1.害怕垃圾邮件


许多用户非常害怕在一个网站上注册后,接下来将会收到接连不断的垃圾邮件。这主要是因为在注册的时候,用户需要留下他的邮箱地址。如果你确定需要用户留下邮箱,那就请在邮箱地址输入框旁边注明这个邮箱地址的用处。这样可以减轻用户对垃圾邮件的恐惧,使他们给你电子邮件时会舒服一点儿。

 


2. 担心类似Facebook/Twitter的关联注册后,会向他的朋友和粉丝发送垃圾信息


用户都很反感垃圾消息,他们也不希望自己的朋友收到这样的垃圾消息,更何况是来自他们发送的。众所周之,使用Facebook/Twitter的关联注册后,都会自动默认给他的粉丝和朋友一条更新动态。如果你打算使用Facebook/Twitter的关联注册,务必要让用户知道你的应用程序将不会自动向平台上推送任何更新的动态。

 


3. 无法注销帐户


有时用户在注册网站后,最终不再想使用它。此时允许用户注销账户,会使那些不愿意在网站上留下他们上网痕迹的用户感到心安。让用户知道,在你的网站上注册后,他们随时可以将账户注销。只有这样用户才不担心他们的个人信息会被永远的保留在你的网站上。

 


4. 对提交的个人信息缺乏安全感


如果用户要给你提交高度敏感的信息,比如信用卡号码或者家庭地址,他们很想知道你的网站是如何安全的处理那些信息的。这需要你在服务器上加密存储他们的信息,以防你的网站被黑客攻击,更或者是落入坏人之手。这就要提示用户让用户知道他们的信息是通过加密后安全的存储在你的服务器上。

 


5. 需要填入的信息选项过多


如果需要输入的信息太多,那么用户就会权衡从你网站能够得到的是否值得他们这么去做?如果不值得,那么他们也没耐心继续注册下去。但是如用认为这样做值得,为了从网站获取想要的东西,他们将不遗余力。一般原则是少让用户在注册时填写更多信息,只有这样才不致让用户反感,一旦用户在网站注册了,总会有更多机会来获取你想要的信息。

 


6. 让用户填写他们认为不必要的信息


让用户填写的每一项信息都应与网站服务相关。如果让用户感觉到填写的信息没必要,他们不是给你假信息,就是不去填写。如果有必填信息但又很容易让用户疑虑是否有必要时,可以在输入框旁解释一下要填写的原因。

 


7. 免费试用的时候向用户索要信用卡号码


在网站还没得到用户认可之前,提供免费试用机会让用户尝试体验你的网站是否是他们所需要的,是一种常用的做法。但免费试用时就让用户填入信用卡号码,很容易让用户感觉到这有很大的安全风险。即使你不在免费试用阶段强迫他们付费,但总是有很多用户仍会觉得让人不安。所以,在用户体验免费试用时,最好不要让他们填写信用卡信息,但如果他们在体验过程中想要更好的服务,就提醒他们去购买。

 


8. 产品/服务不清晰或者不吸引人


当用户访问你的首页时,他们都很想知道你的网站是做什么的。如果网站让用户搞不清楚它的主营业务,那你的首页就需要改改了。让用户不明白网站是做什么或是这个网站不够吸引,那他们不会注册的。只有网站的定位、业务展现清晰,让访问者知道价值所在,才能到吸引他们。

 


总之,这全都可归结于让用户信任和舒适


让用户注册的全都在乎于他们的信任和舒适感。要让用户知道他们提交的信息是受保护的,让他们清楚你要这些敏感信息的用途,只有这要才能取得用户的信任。只有让用户决定自己的信息以及在注册时减少不必要的填写项,才能让用户感到舒适。如果你能按着以上这几点去做,用户是没有理由不在你网站注册的。

  Via:uxmovement

01月 24

优雅降级&渐进增强

优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

01月 23

做只绅士的前端工程狮 -- 页面制作中的细节养成

我们常以“整齐”,“易读”,“亲切”,“易于维护”,“复用性强”等来形容一些优秀的开发者所写的代码。现在,对代码的好评还有一个更为时尚的词“优雅”,是不是听起来觉得很亲切呢?

页面是互联网产品的表现层面,不仅讲求外观,而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者,经验积累是必不可少的,而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容,希望对这些细节内容的探讨,可以帮助各位页面开发者做得更出色,以更优雅的姿态来书写页面。 

 

从Photoshop开始

 

从UI设计稿到静态页面一般都称作“切图”。这个词很容易令人联想到Photoshop中的“切片工具”,但现在切片工具用得并不多,大部分在页面中需要用到的视觉元素,都需要拼合到一个或多个单独的图片中。

视觉元素的分离和拼合

 快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果,也因此有时候没有时间整理UI设计稿源文件。所以,拿到手边的UI设计稿,可能存在图层缺少命名,分组混乱等问题。

如何快速找到需要分离的视觉元素所在的图层?这时候应该使用的是Photoshop的“自动选择”。另外要注意的是,某些边缘阴影及高光是由图层样式生成的,在选取这些部分时应选取旁边的实际绘图内容。

Photoshop的“移动工具“,在使用时勾选一个“自动选择”的复选框即可。此外可以设置是自动选择图层还是图层所在的分组。

拼合是在一个新建立的psd源文件上进行,命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列(快捷键Ctrl + ‘ 切换网格显示)。整齐的拼图不仅方便多人编辑,而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字)。

在Photoshop的编辑→首选项中可以设置合适的网格尺寸。

为方便后续编辑,拼图源文件应适当保留原UI设计稿图层(如保留文本图层,不做图层合并,方便以后的文本更改),同时做好图层命名和分组。此外,推荐在底部增加2个图层:底色层和网格尺寸描述层。

底色层:Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的“网格”不同)中,子网格的边线不容易看清。而加上一个铺满全画布的底色,网格线就很容易辨识了。底色一般用纯白色即可,对于部分颜色偏白的UI元素,可以填充黑色作为底色。底色层只是方便排列元素,在输出图片时,底色层设置为不可见再输出。

网格尺寸描述层:空白图层,采用“20×20”这种格式的命名,说明使用的网格尺寸大小。这样,多人编辑时,可以方便别人很快的设置出适合编辑此拼图源文件的的网格尺寸。

拼图源文件一定要保存到开发目录中,可以在images目录中,单独建立命名为_psd的目录,然后相关的拼图源文件都保存在这个目录中。

对应的,在静态页中用作图片占位和示意的临时图片(如用户头像),可以保存在命名为_temp的目录中。

gif与png-8图片的杂边

为什么gif和png-8格式的图片存在杂边?这是因为,gif和png-8格式的图片使用的是索引颜色编码,而索引颜色中,只存在全透明索引颜色(用来绘制全透明的像素点,也即空白点),而不存在半透明索引颜色。但是,一般的视觉元素的边缘都存在半透明的像素点以形成视觉上的平滑过渡,这些半透明点要保留到gif和png-8,就必须指定用一种实色替代。这也就是Photoshop中的杂边选项的意义。

Photoshop的这个颜色表中可以看到,只有这一个全透明索引色。

Photoshop中也可以选择杂边为“无”,这时半透明点会被丢弃,不再保留到输出的图像中。由于边缘缺少用作过渡的像素点,这样的图像可能会有明显的锯齿,多数情况下效果不佳。

点击“杂边”旁边的小箭头,下拉菜单中即可以选择“无”。

如果选择一个颜色作为杂边色,Photoshop在生成索引颜色表时会把图像中的半透明像素点也考虑进去,并用合适的索引颜色(参考选定的杂边色)替换这些半透明像素点。存在杂边色的gif和png-8图中的视觉元素,处于和杂边色相同的背景色中的时候,效果最佳,所以杂边色的选取应参考最终元素所在的背景。

如果有多种类别的背景而无法保证效果,应使用png-24。这里的png-24实际上基本都是png-32,即应包含透明度alpha通道。这样表述也是因为在Photoshop中,只用了一个复选框的设置来区分png-24和png-32。

勾选“透明度”后,实际上保存的是png-32。

针对不支持png-32的IE6,单独输出一个效果较差的png-8或gif,在一定程度上保证IE6的正常外观。这也是针对不同浏览器的“渐进增强”开发思想的体现。

为IE6单独保存的png-8图。

 

书写内容与HTML

 

在写html之前,仔细阅读UI设计稿是必要的。一方面,理清页面的各个组成部分以及这些组成部分相互之间的联系。另一方面,分析页面及页面的组成部分应该用怎样的DOM结构实现。

页面的DOM结构因人而异。从基础的层面来说,只要能够实现UI设计稿的意图,用什么DOM结构都是可行的。而从专业的层面来说,页面的DOM结构不仅要易于其他的开发者辨识和读取,方便协同开发,而且要有良好的可维护性和拓展性,方便后续的增减和更新。

语义化or非语义化
“语义化”的意思是说,在写html时,依照页面的内容,选取最合适的html标签,以体现html标签的本意。如<p>表示文本段落,那么如果一段文本确实是段落,那么就应该把它们放在<p>标签中,而不是使用没有语义的<div>。

 

语义化,不仅有利于SEO,而且更重要的是使网页内容层次和结构清晰,在可读性上十分友好。试想一下,如果一个页面的<em>标签中的内容,从上下文看确实就是emphasis(强调)的内容,会不会觉得这个页面很整洁很亲切呢?



 

但是,语义化也不是绝对的。微博的新的的站外组件(widget),并不遵从语义,仅使用限定的标签,如块元素只使用<div>,非链接行内元素只使用<cite>,图标只使用<u>。如下图所示最近的新版集体微博组件。


新版集体微博组件的标题部分(红线圈出部分)的代码:

这样无视语义并限定标签的使用,是为了尽可能减少组件被引用的站点的样式,对组件本身样式的干扰。<cite>和<u>都是很少使用的标签,<div>又是非语义的标签,这样,站点css中以标签作为选择器写的样式,就很少会影响到组件(没有多少站点会直接对<div>等非语义标签写reset或默认样式)。


完备的class命名

 先来看使用Firebug查看的以下一段html代码。(取自开发中的微博话题组件)

能看出特别的地方吗?没错,就是所有的html节点,不管位于DOM结构中多深的位置,都有自己的class命名。
为什么要这么做?

首先,需要明确,少一些class命名,通过节点之间的相互关系,当然也可以实现对正确的html节点设置样式。这也是我们过去写html一般的做法,并认为这样可以精简html。事实的确如此,但现在我们应该认识到,精简的html却会带给我们越来越麻烦的css维护。

CSS Wizardry的Harry Roberts对此做了简单的解释说明。


Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >.<


意思是说,就像我们为什么给人取名字一样,当事物被精确地命名后,事情会变得容易许多。稍微想一下就可以理解,直接说“皮卡丘”比说“小智一直带在身边的神奇宝贝”要简单地多。更重要的是,如果节点的位置发生了改变,原来的基于节点位置的写法就不再正确了,但使用名字的写法则不会存在这个问题。

把一些工作推给html,让css更加容易一些吧。想象自己是一个班级的老师,有什么会比每一位同学的名字更方便表示每一位同学呢?


外观与CSS


CSS本身很容易写,但合理的CSS架构却不是一个简单的事情。要保持CSS的可维护性,最简单的做法就是追求CSS的复用性,尽可能减少CSS量。

任何时候,都要写CSS注释
CSS一般来说可读性较差,因此需要我们多写CSS注释。注释内容越丰富和细致越好,而且建议结合ASCII Art(字符画)。如果有时间,甚至可以在一个CSS文件中写一个目录。

如果是后续增加更改,还可以附上时间和项目相关信息,这在多人协作中很有用。

优雅的CSS选择器

 优雅的CSS选择器不仅看起来亲切,而且也可以提升浏览器的样式渲染效率。
主要使用类名(CLASS)作为选择符,不做额外的限定。

上图中下一种写法更好是因为非<p>标签元素也有效,标签可以随意替换,而且样式渲染时更加高效。

避免不必要的继承关系。继承写法是为了避免相同命名的选择符的样式相互影响,但在层级使用上要注意适度。

浏览器样式渲染引擎是按照从右向左的顺序来解析CSS选择器,最右边的选择符称为关键选择符(Key Selector),每一个额外的继承选择符都会增加样式渲染引擎的查找匹配时间。而且,如果没有额外的继承关系,子元素会有更好的重用性。


总结


在实际的经历中,我们开发者所遵循的,主要是在经验积累中的成果,称为“最佳实践”。在心中明确这样一种“最佳实践”的理念,就可以帮助自己培养良好的习惯,在页面书写上做得更加自然,更加“优雅”。
期待和各位前端开发者共同进步!

(文中截图取自Photoshop,Firebug,Sublime text 2)

<!-- 原文来自 微博UDC  锦上添花——多个细节帮助你更优雅地书写页面 -->

12月 24

web上渐进使用jQuery Mobile中animate相关CSS

一、关于animate.css

在介绍主人公之前,先说说他的亲戚。

有个叫“蛋一灯(Dan Eden)”的人弄了个名叫

animate.css

的开源项目,实际上就是使用CSS3 animation实现了各种蛋疼或菊紧的动画效果。

官方主页地址:http://daneden.me/animate
github地址:https://github.com/daneden/animate.css

该项目不错之处在于,你可以自定义你自己需要的CSS效果,自定义页面访问点击这里

自定义你需要的动画效果 张鑫旭-鑫空间-鑫生活

在目标浏览器下,鼠标移到文字上即可预览到效果,勾选与去勾选,点击最下面的”Build it”按钮,可以生成你自己需要的效果的CSS文件。如下示意:
生成自定义的animate.css动画文件 张鑫旭-鑫空间-鑫生活

然而,从实际的角度来讲,这个项目基本上属于华丽包装的中国式礼品,除了让我们学习如何写效果相对应的CSS3代码。换句话说,有技术学习的价值,缺少实际应用的价值!因此,本文的主人公不是他,而是她!

 

二、jQuery Mobile中animate.css

 

jQuery Mobile中也有animate相关的CSS代码(没有animate.css之类名称,标题这么写是是为了与前一个标题呼应)。

虽然同是animation相关动画的CSS代码,但是,jQuery Mobile中的这个显然更简单更实用,更值得一说!

我抽了点拉便便的功夫,把jQuery Mobile项目中的这部分CSS代码提出来了,放在了一个独立的CSS文件中(有改动,兼容、命名、属性等),您可以狠狠地点击这里查看或下载:animate.css

其中,相关animation动画有:spin, fade, pop, slide, flip, turn, flow. 至于具体分别指代什么,下面会讲,稍安勿躁!

有了animate.css, 实现一些动画效果那是非常的简单——几个class类名的切换而已,就算是不懂JavaScript的人,松松的几十分钟,也可以弄出效果来。

对于大多数同行,虽未实践过animation动画,但肯定也有所耳闻,这些CSS3属性IE6~9甚至Opera浏览器都不支持,顶多手机项目或者iPad项目上用用,至于传统Web上,啧啧,估计吃翔的可能性居多!

所以,可能“米娜桑”现在对于animation等东西更多的是观望,了解或等待之类!No, no, no, 诸位,今天我就要告诉大家,就算是需要支持IE6浏览器,面向各类普通用户的传统web项目,animate也是可以渐进使用的,而且使用成本相当相当的低的哦!哟,还不信,咱们骑驴看唱本——走着瞧!

注解:① 大家的意思。

 

三、 热热身 – slide相关CSS与幻灯片切换效果

 

面对新事物,鲜活的实例远比生僻头大的代码、陈述之类更加吸引人。

您可以狠狠地点击这里:slide动画与幻灯片切换浏览效果demo

在Chrome浏览器或者FireFox浏览器下(或360,遨游,搜狗浏览器的极速模式),点击图片,您会看到图片们向左不停地、以流畅动画形式,显示啊显示啊显示……
slide效果在FireFox浏览器下的截图 张鑫旭-鑫空间-鑫生活

在不知CSS3为何物的浏览器下,例如IE7这厮,图片也会一个一个切换,只是木有动画效果而已——对于实际应用而言,足够了!!——我们平时的效果基本上就是这样的,FireFox等浏览器更加better而已!

实现
要说如何实现的,咳咳,说穿了真是简单地让人吐血。

 

  1. 显然的,调用我提出并编辑过的animate.css文件,如下代码:

    <link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/animate.css" type="text/css" />
  2. 给要动画的元素添加几个关键的类名,例如这里是slide效果,因此加一个名叫

    slide

    的类名,如下截图:
    添加关键的类名slide示意图 张鑫旭-鑫空间-鑫生活
  3. 下面就是JS把

    in



    out

    两个类名切换切换就结束了!
    JS切换in和out类名实现animation动画效果 张鑫旭-鑫空间-鑫生活

 

好了,可以去吃晚饭了 – 

 

四、animate.css回锅再炒

 

上面的例子作用有2个:1. 提起兴趣;2. 大致认识。

于是,现在,到了可以好好讲讲

animate.css

相关内容了:

 

  • animate.css

    驱动下的各种动画效果都是通过切换类名实现的;
  • 类名分为三类:公用类名、动画关键字类名以及可有可无的两个3D视角类名。
    公共类名有3个:

    in



    out



    reverse

    . 分别指无到有、有到无、反向。
    关键字类名9个:

    fade



    pop



    slide



    slidefade



    slidedown



    slideup



    flip



    turn



    flow

    . 各个效果后面有展示;
    3D视角类名2个:

    viewport-flip



    viewport-turn

    . 从名字就可以看出,是

    flip

    效果和

    turn

    效果需要的。
  • 虽说IE10也会支持animation动画,但是,这里只有moz, webkit前缀驱动,因此,IE10下无效果(您自然可以添加更多CSS使IE10以及后续的Opera浏览器支持)。
    仅有moz和webkit前缀截图示意 张鑫旭-鑫空间-鑫生活
    从实际应用的角度讲,为了可以准确判断向下不支持的浏览器,这样的命名是比较推荐的。但是,5年之后,必然,这里的命名等需要大动。
  • flip

    效果和

    turn

    效果属于3D变幻的范畴,因此父级元素上有必要设置:

    perspective: 1000px


    您可以使用

    animate.css

    中的

    viewport-flip



    viewport-turn

    或者使用自己定义的类名。因此,我说对于

    animate.css

    而言,

    viewport-flip



    viewport-turn

    不是必须的。

  • animate.css

    中的每一行的CSS代码都是比较高级的CSS3属性,因此包括IE9在内的浏览器都是根本不认识的。这种完全不认识性,使得我们的兼容性处理就变得相当简单了。

 

in, out, reverse类名的理解
各种动画效果的实现的本质就是“使用JavaScript对in, out, reverse三个类名颠来倒去切换”。

一般而言,

in

表示元素从看不见到出现的动画效果。例如

fade + in

的动画效果就是淡入(图片透明度从0到1)。而

out

指代元素隐藏,逝去,例如

fade + out

的动画效果就是淡出(图片透明度从1到0)。

类似的

slide+in

效果就是移入,

slide+out

效果就是移出;

pop+in

效果就是弹出;

pop+out

效果就是收进去;等等!

reverse

的作用是反向。举个例子,最简单的slide效果:进来是

slide+in

,即从右往左。如果移出是

slide+out

则还是从右往左移出,如果移出是

slide+reverse+out

,则是从左往右移出,也就是原路返回

因此,

reverse

一般用在独立元素的交互效果上,例如弹框出现和弹框关闭的效果应该是完全相反的,这时候就需要用到类名

reverse

.

在以前的jQuery版本中,in, out动画的时间都是一样的,如下代码:

 

.in, .out {<br />    -webkit-animation-timing-function: ease-in-out;<br />    -webkit-animation-duration: 350ms;<br />}

 

不过现在做了不同处理,默认动画进入

350

毫秒,动画移出

225

毫秒。至于为什么做这番修改,我也不得而知,总之对相关并木有什么糟糕的影响,我们仍可从容使用之。

 

五、animate.css的向下兼容

 

前面说过,包括IE9, Opera浏览器在内的浏览器都是不支持

animate.css

的动画CSS的,如果保证这些浏览器的显示也是正常的。

其实很简单,只要让这些浏览器有下面这一行CSS代码就可以了:

 

<span style="color: #cd0000;">.out { display: none!important; }</span>

 

animate.css



out

类名的本质就是以动画形式让元素隐藏(不可见);其本质与直接的元素隐藏(

display:none

)是一样的。

然后,什么

in



out

之类的切换就完全不会影响在低版本浏览器上的显示了。

下面问题来了,如何让非目标浏览器上渲染

display:none

呢?

考虑到CSS hack太难搞,@supports目前仅FireFox17支持,我是借助JavaScript实现的,完整代码如下:

 

var BROWSER = function() {<br />    var ua = navigator.userAgent.toLowerCase();<br /><br />    var match = /(webkit)[ \/]([\w.]+)/.exec( ua ) ||<br />        /(opera)(?:.*version)?[ \/]([\w.]+)/.exec( ua ) ||<br />        /(msie) ([\w.]+)/.exec( ua ) ||<br />        !/compatible/.test( ua ) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec( ua ) ||<br />        [];<br /><br />    return { browser: match[1] || "", version: match[2] || "0" };<br />}();<br /><br />if ((BROWSER.animate = (BROWSER.browser !== "mozilla" && BROWSER.browser !== "webkit"))) {<br />    <span style="color: green;">// 不是目标浏览器,创建CSS向下兼容</span><br />    var oStyle = document.createElement("style"), cssText = ".out{display:none!important;}";<br />    oStyle.type = "text/css";<br />    if (BROWSER.browser === "msie") {<br />        oStyle.styleSheet.cssText = cssText;<br />    } else {<br />        oStyle.innerHTML = cssText;<br />    }<br />    document.getElementsByTagName("head")[0].appendChild(oStyle);<br />}

 

建议代码放在页面的头部,或者在头部放入如下的JS文件链接代码:

 

<script src="http://www.zhangxinxu.com/study/201210/animate-fix.js"></script>

 

如果您的头部已经链接了例如jQuery框架,更简单,直接(未测试):

 

if (!$.browser.webkit && !$.browser.mozilla) $("head").append('<style>.out{display:none!important;}</style>');

 

六、fade以及slidefade动画体验

 

fade动画效果

fade

效果可以说是最好理解,最易识别的效果了。淡入淡出效果为jQuery内置动画效果,如果两者画个等号的话,类似这样:

 

$().fadeIn() = $().addClass("fade in");<br />$().fadeOut() = $().addClass("fade out");

 

您可以狠狠地点击这里:fade动画下的图片轮播效果demo

// zxx: 下面的N多demo中也夹杂着

fade

效果,同时

fade

动画是唯一没有

reverse

参与的动画类型。

slidefade动画效果

slidefade



slide

移动和

fade

淡入淡出效果的结合,您可以狠狠地点击这里:slidefade动画下的图片轮播效果demo

slidefade效果进行中的截图 张鑫旭-鑫空间-鑫生活

到目前为止展示的三个demo,唯一不同的就是HTML代码中的类名:
类名驱动的animation动画效果 张鑫旭-鑫空间-鑫生活

可见,CSS3 

animate.css

下的动画效果完全由类名驱动的。

对于多元素且有规律的动画效果,一般关键类名

reverse

是不参与进来的。

但是,对于单独的元素动画,

reverse

就不可或缺了。

 

七、slideup动画效果展示

 

这里展示

slideup

动画,同时更重要的是介绍以下几个知识点:

 

  1. CSS控制下的动画元素隐藏
  2. 定时器控制下的动画元素隐藏
  3. reverse

    使用的一般规律

 

您可以狠狠地点击这里:含提示的图片列表删除demo

本demo含有两个slideup效果,一个是鼠标经过图片时候出现的含有“删除”文字的黑色半透明提示条,如下截图:
slideup效果元素示意 张鑫旭-鑫空间-鑫生活

另外一个就是点击“删除”出现的“是否删除”的提示框,如下截图:
slideup效果元素示意

其中,前面slideup元素的隐藏是通过CSS限制实现的;后者是JavaScript定时器实现的。

在介绍两种元素隐藏方法之前有必要先要脱下

slideup

动画的衣服,好好窥视其真实的肌体。

slideup+in

效果是向上移动到当前位置,距离为自身高度。举个例子,一个身高170cm的妹子站在在二楼吹头发;则该妹子应用

slideup+in

动画的效果就是:妹子瞬间脑袋顶着1楼天花板,倏地向上移动到正好站在2楼的位置。如果我们在2楼的话,看到的就是妹子的脑袋开始从楼板上冒出来——一直到整个身体出现

妹子slideup效果示意 张鑫旭-鑫空间-鑫生活

1. CSS限制下的slideup效果
这类效果,需要容器(类似上面的楼层)限制(overflow:hidden), HTML结构如下:

 

外部限制容器(overflow:hidden)<br />    slideup效果元素(slideup + in/out)

 

于是,slideup动画执行时候我们就会看到元素慢慢“冒出来”的效果了。

如果没有外部容器的限制,slideup效果就是完整元素(妹子不会被楼层截掉)的上移或下降。这显然不是我们需要的,当

out

触发的时候,我们希望元素不可见(下降只是位置改变,元素依然可见)。这种情况,就需要借助JS脚本。

2. JavaScript定时器的限制
动画的执行的时候是固定的(CSS限制的),因此,我们可以使用JS让动画效果结束的时候,让元素不可见,如

display:none

. demo中相关代码如下:

 

<span style="color: green;">// 点击取消按钮</span><br />$("取消按钮").bind("click", function() {<br />    <span style="color: green;">// 提示框下移动画触发</span><br />    $("提示框").addClass("reverse out").removeClass("in");<br />    setTimeout(function() {<br />        <span style="color: green;">// 200毫秒后提示框隐藏</span><br />        $("提示框").hide();<br />    }, 200);<br />});

 

我们无需担心IE6~9之类浏览器的兼容性问题,因为,当元素添加类名

out

的时候,元素就已经隐藏了,所以延时什么的无需担心影响交互效果。

3. reverse的一般使用规律
如果您希望元素的out动画与in动画是“原路返回”的关系,则需要用到类名”

reverse

“. 例如demo页面提示框的显示与隐藏完全相反效果,则需要用到

reverse

.

其使用是一个路子(其他各种animate效果也是如此),我是这样操作的:
元素进入动画:

 

$("元素").addClass("in").removeClass("reverse out");

 

元素移出动画:

 

$("元素").addClass("reverse out").removeClass("in");

 

addClass



removeClass

顺序不分先后。

于是,完整流程的效果即可实现。

初始化的时候,我都是把

out



reverse

预先放在元素上了,例如这里的:

slideup reverse out

.

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

 

 

八、pop效果和flow效果综合实例

 

pop效果是元素从正面弹出弹入;flow效果是元素先变小然后再向两侧偏移。

您可以狠狠地点击这里:pop/flow效果下的图片移入回车站demo

demo页面的pop-flow交互效果示意 张鑫旭-鑫空间-鑫生活

弹框提示为

pop

效果,图片移入移出回车站为

flow

效果。均使用到了

reverse

使动画效果镜像,

flow

效果使用了

setTimeout

定时器控制元素的隐藏。都是上面

slideup

提到的东西,不再赘述。

不过,回收站的摇动效果可能大家会比较感兴趣,该效果并不出自jQuery Mobile中的animate动画效果之列,而是来自文章一开始提到的那个“蛋一灯”的animate.css中的

tada

效果。

相关CSS代码demo页面有展示,该动画触发模式与jQuery Mobile更重用的

in/out

模式不同,其直接添加动画关键字类名就可以了,例如这里,直接:

 

$().addClass("tada");

 

就可以了。

 

九、3D效果之flip翻转

 

flip效果为中轴翻转,具有代表性的效果就是翻纸牌。

您可以狠狠地点击这里:flip动画与翻转纸牌动画效果

纸牌翻面效果截图 张鑫旭-鑫空间-鑫生活

因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名

viewport-flip

或者直接添加如下CSS:

 

-webkit-perspective: 1000px;<br />-moz-perspective: 1000px;

 

perspective

属性具体含义可参见我之前的“CSS3 3D transform详解”一文。

原理简述

 

  1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
  2. 225毫秒结束后,之前显示在后面的元素逆向90度翻转显示在前
  3. 完成翻面效果

 

也就是纸牌的前后面在两个不同的时间点进行flip效果,构成完整的纸牌翻面效果。

注:Chrome浏览器下需要让元素屏幕垂直居中,以保证元素均在视角内,避免部分区域不显示的情况发生。

 

十、3D效果之trun翻转

 

trun效果为沿着侧边翻转,类似翻书,开关门效果。

您可以狠狠地点击这里:trun动画与门的开关模拟效果demo

turn动画下的门开关效果截图 张鑫旭-鑫空间-鑫生活

与上面flip效果类似,父标签需要添加视角样式,或类名

viewport-turn

或自己写两行

perspective

相关CSS.

如果我们把page页面整个应用turn效果,web页面的浏览就像翻书那样,很酷的!

 

十一、其他相关的总结

 

绝对定位元素
所有这些animation动画效果,元素本身所占据的空间至始至终都是不变的。因此,类似幻灯片之类多元素切换的效果,势必需要将元素设为绝对定位元素,以占据同一垂直空间。

再考虑到动画会造成强烈的重绘与渲染,从性能角度讲,我们必须将动画元素脱离文档流,也就是设置成绝对定位元素(避免强烈的回流)。

因此,这里,我认为:如果您想让一个元素应用animation驱动的动画效果,请将其设置为绝对定位元素。

与transition动画对比

transition

也是有动画效果的,其特定是简单灵活,代码精简。不足之处在于:
1. 不同通过CSS控制动画的起点;
2. 不能设置动画的断点;
3. 动画的驱动与值类型甚至单位有关;
4. 动画只能是一次性的;
5. 动画不能延迟;

等。

各有裨益,这里不展开。

转载来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]