H5+JS+CSS3 实现圣诞情缘--学习心得2

1.元素运动实现：position+translate

CSS3中translate、transform和translation的区别和联系
http://www.cnblogs.com/mumu-web/p/5706779.html

translation:平滑过渡。需要事件的触发，例如单击、获取焦点、失去焦点等；
translate:移动，transform的一个方法。
transform:变形，包括旋转、扭曲、缩放、移动等；

在本章中，老师引入了一个jquery.transit插件，下面是关于插件的详细介绍
http://ricostacruz.com/jquery.transit/
http://code.ciaoca.com/jquery/transit/
这个插件在jquery1.4+以上的版本中都可以支持, $.fn.transition()和$.fn.animate()的效果一样，只是它使用了CSS3过渡。
下面是 transit.js 的使用样例：

$("#box").transition({opacity: 0.1, scale: 0.3,duration: 500,easing: 'linear',complete: function(){}
});

2.3D变换的梳理

对transform3D、perspective-style、rotateX、rotateY、rotateZ分析很透彻：
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

2D变换，针对X轴、Y轴: transform：translate\rotate\scale\skew\matrix，
http://www.runoob.com/css3/css3-2dtransforms.html

总结：呈现3d效果需要3部分

父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度。
3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作
3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等

如下，要为一个页面中的图片设置3D效果：

    舞台 //给舞台加一个视觉距离 perspective:800px;作用于后代，而不作用于自身。容器//加一个3D视图声明 transform-style:preserve-3d；只影响这个元素的子元素。//如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d。图片1//增加transform旋转效果：rotate\translate等。图片2图片3

3.异步编程梳理

JavaScript的执行流程是分为”同步”与”异步”，同步编程与异步编程的区别：
http://www.oschina.net/translate/event-based-programming-what-async-has-over-sync

异步编程很容易陷入我们常说的“回调地狱”。Jquery1.5+版本中引入了promise对象，避免陷入双层嵌套循环中，
http://www.jb51.net/article/83435.htm
Defferred.promise()
http://www.css88.com/jqapi-1.9/promise/
Defferred.then()
http://www.css88.com/jqapi-1.9/deferred.then/
Defferred.resolve()
http://www.css88.com/jqapi-1.9/deferred.resolve/

4.观察者模式的理解

观察者模式，又叫发布-订阅模式，就是定义一个一对多的依赖关系，当一个对象的状态发生改变，所依赖它的对象将会得到这个改变的通知。
Javascript中引入了 observer.js对象，

5.SVG概述

svg是基于XML标记语言可缩放矢量图形，支持无损缩放的同时也是因为dom节点，所以也支持事件。弊端是dom数量庞大，复杂度高，渲染速度慢，不适合游戏开发。
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

6.CANVAS概述

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
canvas是标签容器，必须使用JS脚本来绘图。
http://www.runoob.com/html/html5-canvas.html

总的来说：Canvas绘制的总体的步骤

 //1.创建HTML页面，设置画布标签<canvas id="cvs"></canvas>//2.编写js，获取画布dom对象<script type="text/javascript">//3.通过Canvas标签的Dom对象获取上下文var cvs = document.getElementById('cvs'); //4.创建context对象，getContext('2d')是内建的HTML5对象var ctx = cvs.getContext('2d'); // 画笔//5.指定画笔颜色ctx.strokeStyle = "red";//6.绘制矩形ctx.strokeRect(10, 10, 190, 100);//6.或者填充矩形ctx.fillRect(110,110,100,100);</script>

H5+JS+CSS3 实现圣诞情缘--学习心得2相关推荐

html编译圣诞情缘,H5+JS+CSS3 实现圣诞情缘
绘制形状在svg中绘制多边形的标签是polygon,这是SVG中定义的基本形状,可以通过polygon的points绘制出多边形组成的坐标点,points 属性定义多边形每个角的 x 和 y 坐标. ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
前端和后端的英文_80后老阿姨转行做前端的学习心得，深情交流！
一.Why choose front-end 2012.07毕业后,进了一家游戏公司做运营策划,写过营销方案.做过内容编辑.知道广告投放和换量,还得兼职产品经理画原型. 每天9.30-23.00以后, ...
80后老阿姨转行做前端的学习心得，深情交流！
一.Why choose front-end 2012.07毕业后,进了一家游戏公司做运营策划,写过营销方案.做过内容编辑.知道广告投放和换量,还得兼职产品经理画原型. 每天9.30-23.00以后, ...
转行做前端的学习心得，深情交流
一.Why choose front-end 2015.07毕业后,进了一家游戏公司做运营策划,写过营销方案.做过内容编辑.知道广告投放和换量,还得兼职产品经理画原型. 每天9.30-23.00以后, ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...
分享云及人工智能的一些学习资源和学习心得
很久没写新的东西了.这段时间除了适应新的工作,其他时间都献给了各种学习~ 在这个提倡终身学习的年代,面对急剧更新的IT行业,不学点云计算和人工智能啥的,总感觉会被时代抛弃. 所以,终于找到个空闲时间, ...
php成绩查询系统的学习心得_PHP学习心得与体会
PHP 学习心得与体会我想在讲述自己的学习方式前,对那些期望能从我的文章中获得有用信息的人说一句心里话: 我的文章不会对您的学习起到实质性的作用,您能否成功, 还得靠自己的,坚持,坚持,再坚持, ...

H5+JS+CSS3 实现圣诞情缘--学习心得2

H5+JS+CSS3 实现圣诞情缘--学习心得2相关推荐

最新文章

热门文章