-
0%是初始状态,直接跳往下一帧查看全部
-
animation-iteration-count 动画播放次数,默认值为1,infinite为无限制,假如设置为无限制,那么动画就会不停地播放查看全部
-
scrollTo(5000, 1); // 可以观察到页面滚动,产生视觉差效果查看全部
-
var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
把代码封装后,只需要设置一个时间,X与Y的一个比例,就可以让目标移动到指定的位置了 var distX = calculateDist('x', 0.5) var distY = calculateDist('y', 0.5) walkRun(10000, distX, distY)查看全部
-
animation的暂停方式 CSS3的animation提供一个animation-play-state的样式来控制动画的暂停处理。查看全部
-
通过transition渐变的方式让人物走动 $boy.transition({ 'left': $("#content").width() + 'px', }, 10000, 'linear', function() {});查看全部
-
封装,即隐藏对象的属性和实现细节,仅对外公开接口。查看全部
-
实现页面与页面之间的切换 一般来说要根据布局的结构来, 大体有2种: 移动父容器,改变父容器的坐标 移动每一个子容器的坐标查看全部
-
通过溢出隐藏多余的页面<br> overflow:hidden查看全部
-
<ul class='content-wrap'> <!-- 第一副画面 --> <li> 页面1 </li> <!-- 第二副画面 --> <li> 页面2 </li> <!-- 第三副画面 --> <li> 页面3 </li> </ul>查看全部
-
<script type="text/javascript"> var swipe = Swipe($("#content")); $('button').click(function() { // 调用接口 swipe.scrollTo($("#content").width()*2,5000) }); </script>查看全部
-
"雪碧图"缩放原理: 通过CSS3的scale处理可让元素进行缩放。 需要计算出元素的缩放比,可以根据屏幕的宽度与UI的设计比例缩放。 带来的问题: 1. 通过scale缩放后,浏览器认为这个元素尺寸是没有变化的,所以要得到缩放后的尺寸应该是:实际尺寸*缩放比; 2. scale是默认按照中间基点缩放,所以需要计算出实际布局与缩放后布局的一个内部缩放距离,就是一个类似padding一样的数据。查看全部
-
总结: 自适应分辨率的问题可以采用的是JS+百分比布局处理 通过合成"雪碧图"解决图片加载与资源占用的问题 通过CSS3的animation实现帧动画,并且可以控制状态 布局除了left、top布局外,还可以使用最新的css3的transform处理 元素的变化,可以通过设置translate3d启动GPU加速 可以用CSS3的transition做渐变动画 HTML5音频audio的使用 采用promise可以解决异步编程的逻辑嵌套问题 代码组织的一些思路查看全部
-
animationend事件要CSS动画完成后触发。 CSS动画播放时,会发生以下三个事件: animationstart -- CSS动画开始后触发; animationiteration -- CSS动画重复播放时触发; animationend -- CSS动画完成后触发 用法: object.addEventListener("webkitAnimationEnd", myScript); // Chrome, Safari 和 Opera object.addEventListener("animationend", myScript); // 标准语法查看全部
举报
0/150
提交
取消