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

看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>

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

用VB编写网络寻呼 用VB编写小型的网络系统 用VB创建自己的通信程序 用VB构建Internet的应用 用VB开发标准CGI程序 用VB实现客户——服务器(TCP/IP)编程实例 用VB实现聊天讨论室和点对点会话 用VB写一个定时PING某IP的程序 用VB制作浏览器 用Visual Basic 5.0设计E-mail程序(MAPI) 用Visual Basic6.0编写客户服务器程序 用Visual Basic创建FTP组件 用Visual Basic开发数据库浏览器 用Visual Basic轻松地设计Browser及Ftp程序 VB用Winsock控件发信Email VB用Winsock实现点对点通信 邮件检查程序(二) -VB资料 邮件检查程序(一) -VB资料 在VB程序中怎样挂断拨号网络 在VB中利用UDP协议编写聊天程序 在VB中模拟实现邮件传输 在VB中实现文件上传 在VB中使用UDP协议 在VB中用Outlook发电子邮件 在程序中打开 Internet 拨号连接窗口 -VB资料 在一个单位内部或通过广域协议(如X.25)互联的行业内部都有几十或上万台计算机互联,用Intrane 在应用中集成浏览器-VB资料 在桌面上建立一个 Internet 快捷键 -VB资料 VB怎样接收电子邮件(POP3协议简介) VB怎样用VB得知系统当前是否处于internet链结状态 VB制作自己的网络搜索软件 谁有Delphi编译错误信息对照表,有中文注解的最好---50分 请问在SQLSERVER2000中如何在检索数据是将两个字段合并成一个字段,用“||”吗? 数据库的重定向问题! 关于使用资源 QRRichText 打印如果页数很多(2页以上),就打印不完全,但打印预览中可以看到全部,为什么? 我有一个弱弱问题要问。。。 在C#中如何做ToolWindow属性的WinForms?????????? 怎样才能将静态文本框的背景色设置为透明的? 实时错误“480”,不能创建AUTOREDRAW图象,如何解决?把PICTUREBOX定义太大会产生这个错误,不能绘图! COOL!COOL! 序列的一系列问题 劳烦各位介绍一下业界最流行实用的汇编,C语言编译器,我是在校生急需指导! Rebar 移动的问题!烦死我了! 高手留步:请问VC中获取当天日期的函数是???还有比较两个日期所差天数用什么函数??? 请问怎样才能将vb中的date型的内容转化为sql server的datetime型呀,谢谢大家了 请问,怎样在 FLAH5 中直接插入 MP3,并改变 MP3 的音质? 利用delphi连接远程sybase数据库,在多用户操作情况下为什么会产生数据库死锁 看了一下SL275(2001年5月)的课程概述,发现里面没有了Applet了,SCJP是不是舍弃了它了? 有关JAVA的Package,ClassPath的讨论,诸位看过来 COOL!COOL!COOL! what's wrong with the SOCKET define? 使用vb通过NotesSQL for odbc连接过domino数据库时总出现如下错误“ [Microsoft][ODBC 驱动程序管理器] 驱动程序的 SQLAllocHandle on SQL_HANDLE_ENV 失败”,有谁遇到过吗?如何解决? 在SDK中,如何判断对话框中的CheckBox是否选中? 请教如何修改如何提交数据(一对多的表) 如何在delphi里实现文件(比如文本文件)从一台机器传递到另一台机器?比较急! 不知道主板集成声卡的型号,又没有驱动程序?怎么办?主板是ASUS CUSL2,I815E CHIPSET 想问问大家pb自带的例子中有没有关于权限的例子 怎么样吧jpg图片转成ico?????? 听说程序员结婚生孩子多数会是女孩,是不是真的?,好像与辐射有关哦 那里有windoes版的ftp源码 不知道主板集成声卡的型号,又没有驱动程序?怎么办? 主板是ASUS CUSL2 ,I815E CHIPSET 请问哪里有编写多线程安全对象的资料?(72分) 通过界面输入大量数据,界面如何设计??? 在Red hat 7.1如何安装GBK字符集! Focus(老鱼)回答得50分 请教网站的建设计划如何写呀? 请问下面的DELPHI程序如何转为CB 帮忙测试! 怎样得到硬盘序列号 关于Web开发…… Notes Client 待办事宜的定时刷新问题 都是面向对象,怎么C++和JAVA对此代码的结果不同?欢迎高手讨论! 关于//{{AFX_??? 的问题 ---> 如何动态建立字符数组? 都是面向对象,怎么JAVA和C++对此代码结果不同?欢迎高手讨论! 如何解决线程函数与窗体的交互 vb+SQL2000的奇怪出错提示 请问怎么作出jar文件? 急!!!谁有RTF文件格式中元素说明?给一份!谢先!!!!70分奉上!!! java plug-in 1.3.1是什么东东?如何用? ASP中用foxpro数据库,删除记录的问题,我急。。。 求北师大版senior high english课文,听力等的MP3,高中3年的都要··发到jizet16@126.com 几道数学题(恐怖)(1) -1+2-3+4...-97+98-99+100(2) -1-2+3+4-5-6+7+8...-2009-2010+2011+2012(3) -1+3-5+7...+95-97+99 500字以上, 需要北师大版必修3高中英语听力MP3 课文 发我邮箱sunchenlumaomao@126.com 恐怖的数学题100个7组成一个100位数,它除以13的余数是几? 学数学窍门在哪 已知a,b,x,y 满足ax + by=3,ay - bx=5,则(a^2 + b^2)(x^2 + y^2)等于_______. 谁有轮机英语及听力与会话<第三版>光盘破解版请发我邮箱,跪谢.花了78元买了本书,结果.那个光盘不能用.很伤心,就快补考了.有的大哥,别藏啦. 学数学有什么诀窍吗 怎样才能够让数学学的成绩优秀呢?;我为什么害怕数学老师呢?;怎样才能够让自己喜欢数学老师并喜欢上数学课? 跪求轮机英语听力与会话<第三版>光盘破解版和MP3以及航海英语听力与会话评估MP3版 学数学有什么窍门 想要写一个程序将十进制转换成二进制 用c写 三管轮大证电子题库和轮机英语及听力与会话光盘破解版和MP3版 求. what is Tony's opinion about English food?为什么不用how is Tony's opinion about English food? 作文《我最喜欢的数学老师》800字接近800字即可,按我可资料写更好,老师:陆老师,女,29岁,相貌、事件可充分想象 . 谁有轮机英语听力与会话<第三版>光盘破解版和MP3版请发给我 talk about "food"的英语作文? 害怕数学、害怕数学老师、害怕上数学课怎么办啊?话说我以前数学还蛮好的,对数学也挺有兴趣的可是上了初中、那老师特别凶、她还老打击我说我数学不怎么好、我本来就自卑、而且不知 前辈有轮机英语听力与会话<第三版>光盘破解版和MP3版能够发给我 What about_____(eat) junk food用所给单词的正确形式What about_____(eat) junk food 高中生英语词汇书 诗词 散文书求适合高中生看的英语词汇书,还有好点儿的语法书.同求诗词书籍,和散文集.最好是宋词多的书,像纳兰和李煜、辛弃疾那样的.谢谢谢O(∩_∩)O谢谢 我喜欢我的数学老师怎么办他长得不帅,但人真的超好的,每次和他在一起我就超激动的,这到底是怎么回事啊,我一向只对帅哥花痴耶,可是现在.怎么办啊 log2[log3(log4x)]=log3[log4(log2y)]=0求x+y的值, 若log3^5 log5^7 log7^x=log4^2 log6^4 log8^6,求x=? 求托福TPO1~24口语的3-6题的听力文本!附答案最好!有的发到email 非常感谢!boohee33@yahoo.com 计算机,二进制表示数,4位,第1位为符号位,为什么表示范围是-16到15?怎么表示-16? log2为底3*log3为底4*log4为底5log5底6*log6底7*log7底8= 已知log2[log3(log4x)]=0,求x的值 求助:三管轮轮机英语听力与口语 已知关于x,y的方程组{ax+by=3,bx+ay=7}的解是{x=2,y=1,则a+b的值是: 谁有剑桥雅思真题听力45678册的听力MP3,可以发到我的邮箱.liuyi710@yahoo.com 谢谢 急需轮机英语听力与会话(第三版)的MP3,特别是会话部分. 十进制数57转换成无符号二进制整数 哪有人教版九年级上册英语听力下载? 我家姑娘上九年级,请发我邮箱:lsfsy1@yahoo.com.cn 谢谢! 急求 三管轮全套轮机英语听力与会话 光盘破解 谢谢发到我邮箱yubing52121@163.com 谢谢 俞敏洪《高中英语词汇精选》中的单词都是高中课本上的单词吗?背这本书和背刘毅3000哪个好 二进制数00111101转换成十进制数是要步骤 已知log2[log4(log3x)]=log3[log5(log2y)]=0,求4更号x-y^1/5写过程 无符号二进制整数怎么转换成十进制数 二进制数(110001)2转换成十进制数. 高一数学:已知实数abxy满足a方+b方=m,x方+y方=n,求ax+by的最大值! 无符号二进制整数1111001转换成十进制数是多少 若a.b.c.x.y均为正实数,并且x+y=1,求证ab≤(ax+by)(ay+bx)≤(a+b)2的平方/4 已知实数a b x y满足a^2+b^2= m,x^2+y^2=n.则ax+by的最大值是( ) 十进制数50转换成无符号二进制整数 十进制数89转换成二进制数全过程如题 已知abxy均为实数,且a^2+b^2=1,x^2+y^2=1试比较ax+by与1的大小关系 设p=1/log2(11)+1/log3(11)+1/log4(11)+1/log5(11),则 A.0<p<1 B.1<p<2 C.2<p<3 D.3<p<4请问具体解法?ps:2,3,4,5都是底数,11是真数 若实数A.b.x.y满足Ax加by等于3和Ay减bx等于5,求(A的平方加b平方)乘以(a的平方加y的平方)的值 已知实数a,b,x,y,满足a^2+b^2=1,x^2+y^2=3,求ax+by的最大值为? 设P=1/log2^11(底数为2的意思)+1/log3^11+1/log4^11+1/log5^11求p的取值范围 一道恐怖的数学题三姐妹去集市买鸡,大姐带了10只,二姐带了16只,小妹带了26只,上午她们按同一价格卖出一部分鸡,中午过后,怕卖不完,于是降价把其余的鸡仍相同的价格全部卖出,每人均得35元 设实数a,b,x,y满足a^2+b^2=1,x^2+y^2=3,则ax+by的最大值( )可以换一个解题方法吗?因为柯西不等式我没好像没学,提示是说用三角带换。 青朋友们帮忙,我想买一本轮机英语词典,售价为36元那种的,知道的朋友青帮下忙,我着急要, 我发现一道恐怖的数学题亲们都知道,三分之一等于零点三的循环,而零点三的循环乘以三,等于零点九的循环.可是,三分之一乘以三,等于一.零点九的循环并不等于一 惊悚了有木有? 带符号二进制数-100011的原码表示形式为? 不好意思.能把这个听力的再发给我吗?谢谢.elyon_h@126.com 四个连续自然数的积是5038,这四个连续自然数分别是( ).( ).( ).( ).是积```不是和. -1.0和+1.0用二进制原码怎么表示?机器数为8位,一位符号位,7位数值是-0.1和+0.1
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn