-
具体我来归纳下改良的技术方案与涉及到的知识点： 1.为了处理自适应的问题，采用了新的rem布局代替百分比布局方案 2.采用了简单的面相对象编程，采用类的形式对每一个页面场景元素都做了一定的封装 3.引入了Observer观察者模式的处理机制 4.适当的引入svg概念，通过svg绘制矢量图 5.精灵动画部分依旧大量采用了css3 animation动画的steps关键帧，但是不同的是，解决了自适应雪碧图的问题 6.元素运动部分优化了css3 transform transition的使用 7.新增了video视频元素的运用 8.新增了3d旋转木马的效果实现 9.新增了canvas版的雪花实现 10.等等.............查看全部
-
1、animation-name:动画名 2、animation-duration:时间 3、animation-delay:延时 4、animation-iteration-count:次数 5、animation-play-state:控制 6、animation-direction:方向 7、animation-fill-mode:状态 8、animation-timing-function:关键帧变化查看全部
-
1、1rem=16px 2、var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = ? }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);查看全部
-
SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas之后会介绍 SVG有什么优势？ •文件体积小，能够被大量的压缩 •图片可无限放大而不失真(矢量图的基本特征) •在视网膜显示屏上效果极佳 •能够实现互动和滤镜效果查看全部
-
分页布局，三个场景类通过接口去调用，创建一个中介对象，接口分配任务查看全部
-
布局 分页查看全部
-
animation step查看全部
-
<script type="text/javascript"> var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> 字体自适应大小查看全部
-
timing-function 作用于每两个关键帧之间，而不是整个动画查看全部
-
rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem查看全部
-
【布局视口的尺寸】document.documentElement.clientWidth/Height（不包括滚动条） 【视觉视口的尺寸】window.innerWidth/Height（包括滚动条）查看全部
-
.cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem; height: 1rem; width: 1rem; position: absolute; left: .5rem; top: 1.8rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; }查看全部
-
挺咯你查看全部
-
$("button:last").on("click", function() { // $.Deferred改造 function C() { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(3) }, 500) return dtd; } //模拟异步D function D(value) { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(value + 4) }, 500) return dtd; } //模拟E function E(value) { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(value + 5) }, 1000) return dtd; } C() .then(function(data) { return D(data) }) .then(function(data) { return E(data) }) .then(function(data) { $(".container").html("Deferred异步处理:" + data) }) })查看全部
-
ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 190, 100);查看全部
举报
0/150
提交
取消