为了账号安全,请及时绑定邮箱和手机立即绑定
  • 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方法就可以实现播放了
    查看全部
    0 采集 收起 来源:HTML5 audio

    2017-08-10

  • 星星部分: 布局上来说没什么难点,一共有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延时这个属性。
    查看全部
    0 采集 收起 来源:星星与水波

    2017-08-10

  • 转换 动画 音频 渐变
    查看全部
    0 采集 收起 来源:效果介绍

    2017-08-10

  • 鸟动画: 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的值,距离就是一个页面单位,注意下正负取值
    查看全部
    0 采集 收起 来源:鸟动画的实现

    2017-08-09

  • //取花 function talkFlower() { //增加延时等待效果 var defer = $.Deferred(); setTimeout(function() { //取花 $boy.addClass('slowFlolerWalk') defer.resolve() }, 1000) return defer } talkFlower方法混入了Deferred对象,内部通过定时器模拟等待时间1秒,在等待一秒钟之后,增加一个新的样式slowFlolerWalk 具体参考右边的代码块:boy.talkFlower()方法是介于toShop与outShop之间的,这样符合了同步编程的逻辑
    查看全部
    0 采集 收起 来源:等待取花

    2017-08-09

举报

0/150
提交
取消
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想
老师告诉你能学到什么?
1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!