-
//通过$.Deferred()处理过的代码,很明显没有了回调的嵌套,每一部分代码都被封装起来了,只留下Deferred的接口处理了. //这样写的好处是,如果我们以后写嵌套函数,就可以用Deferred的管道风格来编写同步代码了 /* 步骤有三步: * 第一步: var dtd = $.Deferred(); //创建 * 第二步: dtd.resolve(参数); //成功所得值,即为参数 * 第三步: dtd.then(); //执行回调,并将dtd作为实参传入then里面的函数; * */查看全部
-
start to learn查看全部
-
var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调 具体的我们可以参考下jQuery的Deferred部分的API说明查看全部
-
rem布局查看全部
-
123查看全部
-
js，圣诞节视频查看全部
-
总结：呈现3d效果需要3部分<br> <br> 设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作 父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度<br> 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作<br> 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等查看全部
-
自适应布局单位 如果使用【 em 或 rem 单位】进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是【相对父级元素的原因】 没有得到推广。 根据分辨率自动调整浏览器默认字体大小 【rem是相对于根元素html的font-size进行计算的】<br> var docEl = document.documentElement,<br> //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，<br> //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。<br> //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值<br> resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',<br> recalc = function() {<br> //设置根字体大小<br> docEl.style.fontSize =20 * (docEl.clientWidth / 320) + 'px';<br> };<br> <br> //绑定浏览器缩放与加载时间<br> window.addEventListener(resizeEvt, recalc, false);<br> document.addEventListener('DOMContentLoaded', recalc, false)查看全部
-
545查看全部
-
asdf查看全部
-
132查看全部
-
123查看全部
-
@-webkit-keyframes bird-slow { 0% { background-position: -0px 0px; } 100% { background-position: -273px 0px; } } @-moz-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% { background-position: 0px 0px; } 75% { background-position: -91px 0px; } 100% { background-position: -182px 0px; } }查看全部
-
如果实现3张图帧动画效果，代码如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通过定义一个类，类中定义的动画的一些关键数据，比如动画名，时间，次数，切换的位置 通过keyframes定义动画具体执行参数与时间段 steps(3)的意思就是：keyframes设置的0%-100%的段中，background-position的的x坐标会变化3次 steps会平分这些段落值，其变化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px 为什么没有-273px，这个是steps的具体一个算法查看全部
-
CSS3的Animation有八个属性 animation-name ：动画名 animation-duration：时间 animation-delay：延时 animation-iteration-count：次数 animation-direction：方向 animation-play-state：控制 animation-fill-mode：状态 animation-timing-function：关键帧变化 8个属性中，其中1-7都有相关介绍，但是animation-timing-function是控制时间的属性，在取值中除了常用到的 三次贝塞尔曲线 以外，还有个很高级的 steps() 函数，steps函数也就是整个圣诞主题的关键知识点。steps要配合精灵图使用，简单来说就是用来切换多个精灵图的，形成帧动画，类似setTimeout的处理感觉查看全部
举报
0/150
提交
取消