-
return (direction == "x" ? visualWidth : visualHeight) * proportion; 如果direction的值为x，则返回visualWidth*proportion；如果direction的值不为x，则返回visualHeight*proportion查看全部
-
var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
link 是什么意思 scripe的外部导入查看全部
-
1 整个效果以小男孩走路为前提，在三个主题页面中切换，在每个主题页面中会有不同的效果呈现。通过二者的速率变化，可以让用户产生视觉差，感觉人物在不断前行。 2 布局上，令3个块级元素分别代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面。 3 在形成横向布局与无缝拼接后，需要令可视区范围只能显示出一个主题页面的尺寸。所以我们需要再给祖先节点上套一个限制显示区域的节点。 4 在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸。查看全部
-
Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。 Animation也是通过指定某一个属性（如width、left、transform等）在两个值之间如何过渡来实现动画的，与Transition不同的是，Animation可以通过keyframe显式控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transition确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别，也决定了二者各有春秋。 Animation模块包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等属性。 其实说这么多，一句话就是：Transform和width、left一样，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。查看全部
-
animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function （step方法：老师博客 http://www.cnblogs.com/aaronjs/p/4642015.html） animation-delay animation-iteration-count animation-direction 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。查看全部
-
通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。查看全部
-
jQuery 遍历 - find() 方法 find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。 .find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。查看全部
-
jQuery :eq() 选择器 :eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。查看全部
-
这里大体的总结下 自适应分辨率的问题可以采用的是JS+百分比布局处理 通过合成"雪碧图"解决图片加载与资源占用的问题 通过CSS3的animation实现帧动画，并且可以控制状态 布局除了left.top布局外，还可以使用最新的css3的transform处理 元素的变化，可以通过设置translate3d启动GPU加速 可以用CSS3的transition做渐变动画 HTML5音频的使用 采用promise可以解决异步编程的逻辑嵌套问题 代码组织的一些思路查看全部
-
背景音乐很简单，可以直接用HTML5的audio元素播放。在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。 使用： var audio = new Audio(url); //创建一个音频对象并传入地址 audio.loop = loop || false; //是否循环 audio.play(); //开始播放 传递一个视频的地址，创建一个Audio对象，设置属性loop是否循环播放，然后调用play方法就可以实现播放了查看全部
-
星星部分： 布局上来说没什么难点，一共有6个div元素，背景都是同一张图片，通过left与top修改每一个div的坐标点。唯一的动画就是闪烁，实现上有3种手段 传统的做法就是通过多张图交替的改变 可以通过transition过渡做渐变的动画 通过animation过渐变动画 水波部分： 布局上4个div元素并且每个元素赋予不同的图片，同样的也是通过absolute定位，top与left赋予坐标。水波的动作也是很简单，就是两边不断的移动，实现上也有很多方式 通过定时器不断的修改left的值 通过transition处理 通过animation处理 区别transition与animation的使用 transition与animation用的很多，这里简单的描述下不同点，transition需要事件触发，animation可以直接自动触发，而且功能上更为强大，包括可以设置不同时间段的动画规则，还有状态的控制，事件等等。 星星与水波动画有个共同的特点 不需要手动触发 不断的循环变化 所以针对这个相同点，最终采用了最简单的animation处理。 星星来说可以增加一个opacity变化的的关键帧，1到0重复变化就能达到一个闪烁的效果，水波可以设定translateX变化的值，可以实现左右晃动的效果。需要注意的是，每一个元素的动画执行会有个先后循序，所以需给每一个元素分别单独设置animation-delay延时这个属性。查看全部
-
转换 动画 音频 渐变查看全部
-
鸟动画： CSS布局比较简单，通过background-position加载精灵图，做动画的元素都是需要设置position：absolute这样才能独立漂浮文档流，让页面的重绘更少 图片变化部分采用的是CSS3的animation，通过设置animation-timing-function: step-start;马上跳到动画每一帧结束的状态，这样就让动画执行一帧一帧的切换效果 @-webkit-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% {background-position: 0px 0px;} 75% {background-position: -91px 0px;} 100% {background-position: -182px 0px;} } 以上是4个变化点，但是实际上我们只有3张图，0% 100%是最后一帧，这是因为设置step-start了的缘故，注意下这个写法就可以了 移动部分就很简单，我们移动left或者right的值，距离就是一个页面单位，注意下正负取值查看全部
-
//取花 function talkFlower() { //增加延时等待效果 var defer = $.Deferred(); setTimeout(function() { //取花 $boy.addClass('slowFlolerWalk') defer.resolve() }, 1000) return defer } talkFlower方法混入了Deferred对象，内部通过定时器模拟等待时间1秒，在等待一秒钟之后，增加一个新的样式slowFlolerWalk 具体参考右边的代码块：boy.talkFlower()方法是介于toShop与outShop之间的，这样符合了同步编程的逻辑查看全部
举报
0/150
提交
取消