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

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

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

微软资深IE专家邹颂兵:好产品才是竞争的关键 Web应用程序完全测试指南 Python正在取代R,成为数据科学界新宠 代号Threshold:微软将推Windows统一平台Threshold 日本任天堂掌机应用:《卢浮宫》革了谁的命? [TUP第31期]《浪潮之巅》吴军:硅谷3.0助力中国企业走向国际 SequoiaDB创始人:比MongoDB领先一到两年 打造企业级NoSQL数据库 [对话CTO]甲骨文熊光樑:全球研发模式开发出接地气产品 GitHub中国游记之长城——跨越那堵看不见的墙 IE11开发人员工具:UI响应工具详解 2013 Linux领域年终盘点 腾讯云俱乐部深圳站成功落幕 开创移动开发新篇章 解读云计算、大数据、物联网等九大IT技术发展趋势 苹果已证实收购Topsy或将涉足社交领域 触摸未来:Tactus微流体技术2014年来袭 Windows的未来:一个核心 多个版本 Github项目中使用率最高的Java/Ruby/JS库 2013中国大数据技术大会盛大开幕 从黑色星期五找到的六个规则 帮助网站转化 移动开发者的自学宝典:十大在线编程学习网站 MIT新技术:远程触摸和操纵实物 创新人机交互 中国移动研究院业务支撑研究所所长孙少陵:大数据实时处理技术发展趋势及中国移动实践和展望 “第一届中国大数据技术创新与创业大赛”主办方发言及创新分赛颁奖 中国移动研究院业务支撑研究所所长孙少陵:大会及与会嘉宾介绍 中国工程院院士、大数据专家委员会主任李国杰:能挖掘出价值的数据就是好数据 阿里飞天平台总架构师唐洪:飞天开放平台 百度大数据首席架构师林仕鼎:新计算时代 金山发布全系列IaaS平台 Google无人驾驶汽车与机器人组合,秒杀无人机 Google欲推新Chrome应用:适用于Android、iOS平台 comScore:美国市场苹果手机独占鳌头 Android和iOS双寡头垄断 关于ImportFile()执行后数据窗口update()的问题 有人参加过软件测试工程师的认证吗? 寄存器分段。。。 请问哪里有数据库设计规范方面的资料 关于使用inet控件对ftp操作的问题 一个设计方面的问题,各位高手请进!! 急急!清VB.net高手帮助.如何实现利用扬声器发生程序? 对象参数问题 如何得到文件路径 关于窗体的管理 JAVA代码操作数据库备份MYSQL? 我要将TEST01下所有的表授权有没有更简便的方法??? 数据库面试题,大家看看(给分无商量) 存储过程问题拉!帮忙看看吧! 关于ExportMap输出图片的问题? Image控件的问题? sql server 连接 请问无组建上传的详细代码解释。 怪问题! 对文件操作总报I/O error 32,请教???? 网上邻居的问题。 有一个比较基础的问题想同大家共同探讨。 急需各位高手帮忙 数据库冷备份脚本 在网页里如何检测IP地址? 调用其它程序问题! 谁能给我一个进销存的库结构啊 ▲▲▲ 有个"矩阵加括号"的通用程序,如何把它改得更好!!! "link"是什么意思? VB控件的问题 到这里放松一下吧:) 水晶报表报登录失败有什么原因? windows advanced server 2000 的雙網卡問題? SQL SERVER 在ASP 中的分页技术 socket数据传输中网络断开,如何处理? <<黑客II>>人物分析搞怪版 简单问题请教!!急!! 请问MSSQLServer7可以直接通过COPY数据库达到备份的目的吗? 各位大鸟们:帮兄弟拿个主意? 怎样改变webform的caption阿 怎样在程序中实现关闭或开启触发器? 如何把CListCtrl的滚动条移到最底端? TPageControl怎么动态生成一个TabSheet? vb6的工具菜单下有一个添加控件集工具,可以添加按钮列表框,树状视图列表视图拆分条,移动钮列表框3种,请问还可以找到更多的控件集吗? 请问为何cup周围有两个电容鼓起来? 上传文件时,出现Access to the path "c:\inetpub\wwwroot\upload\abcrar" is denied. TPageControl怎么动态生成一个TabSheet? treeview控件,如何能删除被选的节点的相邻两层?? 图像缩略图的问题,在线等待,急,我就只剩这些分了,倾囊相送,不要嫌少,谢谢了 指针,变量声明的问题,急,在线等待 大家推荐一款路由器,采用后100分相送! 地缘战略位置是什么意思? 如果没有任何保护措施,老虎将在何时灭绝?A 据专家估计,将在2022年灭绝B 据专家估计,将在2032年灭绝C 据专家估计,将在2042年灭绝 若将时钟调慢10min,则时钟转过的角度为?分针转过的角度为?急吖! 英语翻译这首歌是披头士约翰列侬的!Motheryou had mebut I never had youI wanted youyou didn't want meSo II just got to tell youGoodbyegoodbyeFatheryou left mebut I never left youI needed youyou didn't need meSo II just got to tell youGoo 以党为主体做某事的意义 营养液广告词:口蜜腹健,是什么. 英语翻译John Winston Ono Lennon,was born October 9th 1940 in Liverpool England.He was killed December 8th,1980 in New York.His parents seperated when he was four years old.After that he moved in with his aunt Mimi.His father was a commercial seam 為什么男人是女人的依靠,為什么女人不可以是男人的依靠?為什么男人娶女人囬傢,而不是女人娶男人囬傢?為什么男人負勒女人,教負心漢;女人揹叛勒男人叫濫貨? 1.依据自己的生活经历和情感体验,仿照下面的句式再写几句话.童年的趣味,在百草园短短的泥墙根一带;童年的趣味,在夏夜里美女蛇的生气传说;童年的趣味,在---------------------------;童年的 高中阶段需要用多少倍的显微镜 生男生女到底取决于谁?是女人还是男人? 我不了解 有谁知道"Press of Northeast University of Technology"是什么意思啊?应该是出版社或报刊一类的. 备注和批注这两个词中的注什么意思 目前,已有97个世贸组织成员承认中国的完全市场经济地位.而美国、日本、欧盟等发达国家均拒绝承认中国的市场经济地位,并以完全市场经济地位来压制中国,这一情况表明( )A.经济全球 现在是什么天气 判断一个点是否在一个三角形面内. 新经济自由主义和极端自由经济主义的名词解释. 尽收眼底的意思是什么 怎样判断一个点是否在三角形内或者外我需要 的 我用来编程的啊 用方程的方法啊下面的大哥 你说的 方程 我还是没搞懂啊 你用 普通的方式给我写出来好嘛 就是X+Y=0 这样的形式 降压型DC-DC电源转换器怎样提高带负载能力模电课设要求的,12转5伏,用555做的,现在带上5Ω电阻后电压降至1.7伏,是为什么呢?因为电流过大吗?怎么解决呢? 如何提高孩子集中力?多做体育运动 如何判断一个点在三角形内要通过计算。 知道三角形六个边角元素的其中哪几个可以确定一个三角形? 辩论:举国家之力办体育应该终止辩论赛题目,我邮箱是2009101626@hstc.edu.cn C#判断一个点是否在三角形内?在Form窗体中,指定三个坐标点A(ax,ay),B(bx,by),C(cx,cy),怎么判断一个任意点P(px,py)在点A,B,C所组成的三角形区域内? 什么是三角形6个边、角元素今天做一道数学判断题,“三角形6个边、角元素,有5个元素分别相等的两个三角形是否全等”不懂是哪“6个边、角元素”谁能告诉我? 地缘与区位区域有何不同 c++ 怎么判断一个点在三角形内已知三角形3点(x1,y1),(x2,y2),(x3,y3)和任意1点(x,y),怎么用程序判断点(x,y)在三角形内 在Rt三角形中共有几个元素 什么是公共政策制定过程的社会化 收入的初次分配和再分配有什么区别? y=sinx+3/cosx-4求函数的值域提示:先把分母乘到左边,然后整理为sin(x+θ)=f(y) 然后 f(y)的绝对值小于等于一,解出不等式.计算量可能用点大,只需要把函数整理为sin(x+θ)=f(y) 社会化社区卫生服务体系的特点有哪些 财政收入是再分配还是初次分配? 三角形的6要素是什么 台湾现在还属于中国管吗?可是台湾无论财政缴纳,都和中央没有关系.虽然1945时回归了中国,可那是国民政府,自新中国成立,台湾就与中国分裂.到现在我也没有听说中国收复台湾主权的问题,也 谁把谁的明媚尽收眼底意思 含有l,y,y或y,u,y,u的英文单词就是同时含有l、y、u其中两个或三个字母的英文单词 五六十年代,苏联(加加林卫星)有优势的时候,美国怎样理解集体所有制制?(共产主义) 为什么不会有人能和你感同身受?好伤心…… 到底是方的还是圆的? 英文Technology的音标是什么? 物理隔离法中是不是所有整体受到的力每个个体都会受到请不要复制百科= = 高中物理受力分析什么时候可以用整体法?我指的是满足什... acadmic / enthusiastic /information / brilliant / 都怎么念 ,音标也写上,也要翻译, 批注的注意思是什么 整体法做受力分析的题目该如何做? 孟子.荀子 .孙子.三国志 哪个不是先秦时代的happywanghaoyi 一个长方形被分成了四个不同的小三角形,其中①号三角形的面积是6平方厘米,②号三角形的面积是长方形的6分之1.长方形的面积是多少平方厘米? 三角形中有哪些元素? Information Technology Management里面出现Quality Information Technology Plan和Information Technology Quality Plan 两句话好像这是调换了一下次序,应该怎么翻译啊 国家干预主义取代经济自由主义能否消除经济危机 三角形有几要素 MATLAB里如何计算带有未知量的积分?如 f(x,t) 是有关x和t的函数,要计算 ∫ f(x,t) dx其中x的上下限为确定的两个数,计算出来的积分结果应为t的表达式,如何用int实现?或者用其他积分函数实现也可 长方形ADEF的面积是16平方厘米,三角形ADB的面积是3平方厘米,三角形ACF的面积是4平方厘米求三角形ABC的面 我们学过三角形的组成,元素有哪些 备注和批注这两个注什么意思 什么是经济自由主义,什么是国家干预主义,它们对公共政策有何影响? 《大堰河 我的保姆》中作者为什么说“我看到雪使我想到你”,而不是看到春雨或是听到秋风萧瑟的声音 德回应美批评称“纯粹胡扯”称“以出口克里首访政变后埃及 美将继续与埃政府震惊! 镜头揭秘世界各地女人的惊天差法国两名记者在马里被害 法士兵运送遗一游船在泰国芭提雅附近沉船6死 包括人民币升值,钱却为何越来越不值钱格鲁吉亚知名钢琴家将访华巡演iOS 7缩放导致晕眩的原因:速度堪中共三中全会改革方案令人期待孙杨开豪车载年轻女子与公交相撞 系无国资改革方案或尽快出台 国企分类监管前3季度物流运行稳中向好 四大瓶颈亟宁波警方便衣蹲点 打掉跨省假发票大案机构预测10月CPI同比涨3.3% 非制造业PMI创新高 有望延续趋稳向郑州皇家一号涉黄被查 号称“中原第一国资委:地方国企效益下滑 仍盲目铺摊亚裔模特因人体彩绘爆红全球 海量性感奥巴马参加弗吉尼亚州长造势演讲 表情美秘密打造人类最快飞机 导弹将无法拦陈毅之子:反思文革是必要的 但不赞成楚天都市报讯 □记者舒平整理五年一贯制招生计划肢残志愿者将为居民磨刀武汉:女童街头大便引发环卫工与家长冲图文:难倒教授维修工捡到钱包 6500元完璧归赵最美社区武汉赛区50强昨日出炉赵飞视察火车、地铁站 要求筑起“反恐第二春像倒春寒 我心好冷武大学子3天徒步沙漠70公里胆结石盯上年轻人窃贼偷走变压器 120户居民停电8小楚天都市报讯 叶兆言 著鄂旅投成立旅游网 游客可在线订门票图文:“富民菜医”8年坚守鄂西高山热火马刺大捷占先机老咳喘肺气肿有奇方国家艺术基金要把钱花在刀刃上图文:湖北男篮表示和计划不冲突纪玉:“条子”门票谁来埋单安徽芜湖致7人死交通事故原因查明3名
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘