说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

看IE11如何助力AAF推动公益事业

HTML文档下载 WORD文档下载 PDF文档下载
AAF是一个公益组织,在过去的15年中他们在拯救月熊方面做了非常多的努力,月熊是非常可爱的动物,有着非常丰富的故事,我们也希望能够帮助AAF通过在线的形式把他们的努力分享给更多的人知道。

在北京举办的亚洲动物基金成立15周年庆典活动上,AAF授予了微软“最佳教育贡献奖”,以表彰其对动物保护的支持和贡献,并与IE11浏览器携手推出了“月熊志”网站。该网站使用最新的HTML5技术,让用户能够通过网络身临其境的了解可爱的月熊。通过丰富的3D动画、高清图片和视频、以及自然的触控操作,让人们在网页上也能获得如应用一般流畅的沉浸式用户体验,更直观地了解月熊保护的故事,而且能够让网友和内容进行有趣的互动,从而更好地调动了大家参与的积极性。

像翻阅杂志一样轻松,网站中的翻页

整个体验的名字叫月熊志,总共分为三部分组成,第一部分内容是一只叫Jasper的熊和他小伙伴之间的故事,第二部分讲Jasper和他小伙伴的过去,活熊取胆所带来的一些痛苦的经历,第三部分则是将AAF在这 15 年过程当中对于拯救黑熊还有动物福利作出的贡献。


用户在浏览整个体验的过程当中,就像翻阅一本杂志一样轻松,网站中的翻页依靠了CSSTransitions和CSS Transforms,但这又不是一本传统的电子杂志,在杂志中开发者加入了非常丰富的 3D元素、高清图、视频和信息交互方式,并且可以触控流畅体验,让人们沉浸在月熊的故事和AAF为保护月熊所做的努力中。

技术要点:

CSS transition

CSS transition属性的作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。于是,在整个网站通用的class中加入transition属性,就可以很轻松的渐进增强地实现动画效果,超有实用价值。

transition有的具体属性见下面介绍:

  • transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
  • transition-duration:*//指定这个过渡的持续时间
  • transition-delay:* //延迟过渡时间
  • transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面的例子

.trans{display: inline-block;padding:1px8px;transition-property: background-color;transition-duration: 0.3s;transition-timing-function: ease;}.trans:hover{background-color:#486AAA;color:#fff;}<ahref="#"class="trans">经过我~~~</a>当然也可以不用把transition属性一个一个摊开写,而是合并。如:.trans {display: inline-block;padding:1px8px;transition: background-color 0.3s ease;}

transition中的transition-timing-function属性有一堆ease相关的值(linear | ease-in | ease-out | ease-in-out | cubic-bezier)。

  • linear :均匀的平缓的效果
  •  ease-in :先慢后快的缓动效果
  •  ease-out :先快后慢的缓动效果
  •  ease-in-out:先慢后快再慢的缓动效果
  •  cubic-bezier:平时基本不会用到

CSS transform

CSS transform指变换,类似于PS中的Ctrl+T自由变换。Transform包含拉伸,压缩,旋转,偏移等。

Transform包含下面属性:

  • none :指定一个身份转变
  • matrix(<number>, <number>, <number>, <number>, <number>, <number>) :以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵
  • translate(<translation-value>[, <translation-value>]) :通过矢量[tx, ty]指定一个2D translation, tx 是第一个过渡值参数, ty 是第二个过渡值参数选项。如果<ty> 未被提供,则ty以 0 作为其值
  • translateX(<translation-value>) :通过给定一个X方向上的数目指定一个translation
  • translateY(<translation-value>) :通过给定Y方向的数目指定一个translation
  • scale(<number>[, <number>])提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值
  • scaleX(<number>) :使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数
  • scaleY(<number>) :使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数
  • rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义
  • skewX(<angle>) :按给定的角度沿X轴指定一个skew transformation(斜切变换)
  • skewY(<angle>) :按给定的角度沿Y轴指定一个skew transformation(斜切变换)
  • skew(<angle> [, <angle>]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切

transform属性要是加上transition的过渡特性,那就是如虎添翼,例如下面的例子:

.trans_effect{display:block;line-height:100px;width:100px;background:#beceeb;margin:30px auto;text-align:center;-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;-ms-transition:all 2s ease-in-out;    transition:all 2s ease-in-out;}.trans_effect:hover{-webkit-transform:rotate(720deg) scale(2,2);-moz-transform:rotate(720deg) scale(2,2);-o-transform:rotate(720deg) scale(2,2);-ms-transform:rotate(720deg) scale(2,2);transform:rotate(720deg) scale(2,2);        }<ahref="#"class="trans_effect"></a>

满足来自触控设备用户的流畅体验

用Visual Basic编写托盘程序 用Visual Basic窗体背景花纹的实现 用Visual Basic设计窗体背景花纹 用Visual Basic设计更好的用户界面 用Visual Basic设计三维图形按钮 用VisualBasic制作半透明窗体 运行时改变控件大小的两种方法-VB资料 运行中隐藏/显示窗口标题栏-VB资料 在ListBox适当设定水平滚动条的宽度-VB资料 在VB中利用API实现窗体的平滑显示 在vb中让控件大小和位置随着表单的大小成比例变化的方法 在VB中实现闪动标题栏 在VB中实现位图的透明放置 在VB中使用数据窗体设计器插件 在VB中制作单独程序封面的两种方法 在VB中制作透明按钮 在Visual Basic中如何拖动窗体或控件 在Visual Basic中显示动态运行进度 在菜单中加入图标 -VB资料 在程序中调用关闭Windows对话框-VB资料 在任务栏中显示无边框窗体的图标-VB资料 在系统菜单上添加自定义菜单项 -VB资料 在运行时动态生成多个相同的控件?-VB资料 在最小化状态时提供提示 -VB资料 暂时禁止窗口更新-VB资料 VB怎样得到文本框(TextBox)中的文本行数? 制造出透明的Form -VB资料 VB制作半透明窗体和形状不规则的窗体 VB制作方向按钮 VB制作渐变的窗口背景色 字体闪烁 -VB资料 为何输入汉字时会出现乱码?急急急!!! c++builder中 StrPCopy()头文件是什么? 怎麼調用jar文件中的類和函數 asp.net中还像asp一样可以用javascript吗? 这样的.xml 中如何在xsl中查询出<d:Title>值为"收文登记"的纪录??? 请问导航图如何实现?(玩过红警的更容易解答) 如果女友考上研究生,而我的学历低怎么办? 大虾帮忙,ListCtrl的列名为什么不能显示中文? 多谢各位,为什么http://IPaddress/exchange能看到内容,但是http://IPaddress/exadmin看不到内容 数据窗口怎么获得列的个数和怎么判断列的类型为DropDownDW类型! 求助 outlook&&ie6(放分) 我写了1个ip变域名的软件,发现现在都用防火墙,根本的不到域名,能不能用dns服务器或者其他方法写代码获得? 难道真的要去请电脑技术人员来帮忙了吗?急!急!急!!! 为什么有两个连接查询变量就不行呢代码如下: Rose进行JavaOOM的超级菜问题No.1:如何设置一个类MyButton成为JButton类的子类 如何在显示汉字 有关staroffice的问题 谁能告诉我完整的正式版本Dream_controls_collection for D6的下载地址呢? 百分求解有关ODBC的问题 那位知道最好的局域网聊天软件是什么? 数据库的问题 请问PB远程备份,恢复SQL SERVER2000应该怎样实现。(备份到本地硬盘)高分赠送 VCKBASE改版了,已经重新开张了!感激我的快给分!多少不限,呵呵... 那里有FrontPage server extension下载? 我什么我的程序从数据库取不出数据 C++Builder 中有没有关于SNMP 的控件啊? if not myrecord.bof then中的BOF是什么意思啊 Sybase数据库设备存放的地方? 高分救助:300分 一個通用的聯結sql server不能運行,help me 请大虾帮忙!这个SQL语句怎么写?多谢! 求教如何将enter转换为tab? win98下如何使用命令行方式共享文件夹 请问一个关于Iterator的问题. 我想把Access数据库里的内容只保留 1 天,超过 1 天的数据自动被删掉,请问该怎样设置。 拷贝构造函数实现多态性?!!你知道吗?........... 有多少人喜欢CCTV的张越和王小丫? 请问DES的最短代码的长度是多少?急急急,多多送分! 一个关于FlexGrid与MSChart的问题 请问有没有办法把一个报表导到一个Excel中? 数据管道对象....my_pipe.dataobject="p_pipe"(已经建好的数据管道对象)为什么提示 空对象?? 好象无法调用一个动态嵌入式框架中的函数 zhq2000(俗子) 谢谢你帮忙!我还有些不明白的地方想请教一下! cmos 如何下载JDK1.3版? 在DBGrid怎样移动一行数据?高分赠送 这个问题很奇怪!关于弹出菜单。 为什么 Rs->GetFieldValue 取两个字段的时候出错,只能一次去一个字段么? 用C#如何实现在form上画一条曲线,然后用鼠标托动曲线上的某一个点,该曲线的弧度根据鼠标的移动而变化 如何选择一行数据,条件是该数据的date类型的列为空(oracle)? 高一化学要掌握的元素周期表规律就是必修2第一章的周期表 将某无色混合气体依次进行如下实验.1.通过氢氧化钠固体后,气体体积变小 .2.通过灼热的氧化铜粉末,粉末变红色,3.通过白色硫酸铜粉末,粉末变为蓝色,4.通过澄清石灰水,溶液变浑浊.是判断原 There are about ____ students in our schoolA five hundred Bfive hundreds Cfive hundreds of 【高一化学】溶解性在元素周期表中的规律》》如题,物质(包括化合物)的溶解性在元素周期表的趋势是怎样的?溶解性:AgF Talk about your family英文对话 There are about two( )students in our school. talk about our school in【】 【pair】用适当的词填空 英语作文《talk about your family》一篇以Talk about your family为话题英语小作文,20秒左右 There are about five __ student in our schoolA hundred B hundredsC hundred ofD hundreds of 在元素周期表里,如何判断元素对应的酸酸性强弱,气态氢化物的稳定性等等 为什么NaHSO3.NaH2PO4的水解小于电离为什么HSO3-==H+ + SO3- 比 HSO3- + H2O==H2SO3+OH- 反应得多对不起,我问的就是原因希望能简单明了,本人知识有限 There are about____students in our school(2100用英文表示) 求元素周期表各种规律,如氢化物稳定性,原子,离子半径. 为什么NaHSO3 NaH2PO4以电离为主 而NaHCO3 NaHS Na2HPO4易水解为主? There are about six __students in our school.A.thousand B.thousands of c.thousands D.thousand of 元素周期表从左到右气态氢化物的稳定性怎么变化 为什么NaHSO3显酸性.它不是强碱弱酸盐吗.老师说是因为电离大于水解,怎么看出来电离大于水解的? 氢氧根的化合价是多少? 怎么求圆柱体的容积? 为什么过氧化氢分子不带电,氢氧根离子带电? 氢氧根的化合价是什么? She likes summer best 的同义句是什么 圆柱体体积我这有一穴子玉米,圆柱体的,半径是103厘米,高90厘米,求体积是多少千斤, NaHSO3,Na2HPO4电离方程式和水解方程式NaHSO4 还有Ca(HCO3)2 一句型转换 ⒈She likes math best.(改为同义句) Her_________ __________is __________⒉I like hist一句型转换⒈She likes math best.(改为同义句)Her_________ __________is __________⒉I like history because it's interesting. 圆柱体体积咋算? 和氢氧根离子组成完全相同但不带电的微粒是什么? 苹果是酸性还是碱性的? Our country 英语作文 什么样溶液同时存在电离和水解?如何比较显酸性和碱性帮忙举个例子 苹果是属于酸性还是碱性 求圆柱体的体积!柱子高23.53米,直径1.8米,求体积! There are 30girls in our class._are from the country she likes bread best?同义句替换 请教几个英语题,答案我有,主要要的是解析.谢谢(>﹏ There are only 100pandas in our country.的中文意思___ 高一化学元素周期表按照金属活动顺序,Sn的还原性>Pb而按照元素周期表的话,Sn、Pb都在痛IV(A)族,那忧郁Pb电子层数更多,所以该是Pb更容易失去电子.所以Pb还原性>Sn.这是矛盾的.为什么!?而且,其 请求出这个圆柱体体积! There are many (beach)in our city. 关于元素周期表(高一化学)人类已知的化合物种类最多的是( )A 第一主族元素的化合物B 第三主族元素的化合物C 第四主族元素的化合物D 第七主族元素的化合物 我们全家正在为龙舟节做我们自己特殊的粽子.英文翻译 句式:Our family`````` There(be)great change in our country since 1979 关于元素周期表的第三周期元素R,它的原子核外最外层实现8电子稳定结构所需的电子数小于次外层和最内层电子数之差,且等于最内层电子数的整数倍.下列说法正确的是:A.R元素最高价氧化 适当形式填空 Today ( )(near) every family in our country has a TV set 用化学用语来表示:铜绿中氢氧根离子的化合价显-1价 NO2与NO的物理性质与化学性质 碳与它非相邻的短周期元素以极性键形成的化合物中,各原子最外层都达到了8电子稳定结构.满足这种关系的元素有几种呢? 亚硫酸根离子水解显什么性? 氮气,一氧化氮,二氧化氮的物理性质化学性质 硝酸铵撞击分解成一氧化二氮和另一种氧化物,化学方程式怎么写 硫酸根和亚硫酸根的区别 She likes science best 同义句转化 短周期元素化合物和黑色粉末生成无色气体,可能有哪些情况 怎样区别硫酸根和亚硫酸根? 化学的元素周期表的族与周期中的元素氢化物性质有哪些? 有两种白色钾盐(正盐)粉末A、B.加入稀盐酸后分别生成无色气体D和E;D和E通入氢氧化钡溶液都能使其变浑浊D、E通入品红溶液只有D使其褪色;D还能使溴水褪色生成两种酸的混合溶液.A、B 亚硫酸根与硫酸根1.亚硫酸根的一些性质2.与硫酸根的关系(如何转化?哪些性质不同等)3.如何检验 苹果是酸性还是碱性? 某同学在化学实验室发现了一包由两中盐(不含氢元素)组成的白色粉末,和一瓶标签破损的无色溶液(一种酸),为了确定各自的成分,设计了以下实验:取白色粉末21.8克加入盛有129.4克的无色溶液 亚硫酸根和硫酸根有什么不同?有助于回答者给出准确的答案
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘