慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

乔峰之巅

/** * 切换页面 * 模拟镜头效果 * @return {[type]} [description] */ function changePage(element, effect, callback) { element .addClass(effect) .one("animationend webkitAnimationEnd", function() { callback && callback(); }) } /** * 中间调用 */ var Christmas = function() { //页面容器元素 var $pageA = $(".page-a"); var $pageB = $(".page-b"); var $pageC = $(".page-c"); //观察者 var observer = new Observer(); //A场景页面 new pageA(function() { observer.publish("completeA"); }) //进入B场景 observer.subscribe("pageB", function() { new pageB(function() { observer.publish("completeB"); }) }) //进入C场景 observer.subscribe("pageC", function() { new pageC() })

查看全部

0 采集收起来源：场景切换
2018-03-22
乔峰之巅

/** * 背景音乐 * @param {[type]} url [description] * @param {[type]} loop [description] */ function HTML5Audio(url, loop) { var audio = new Audio(url); audio.autoplay = true; audio.loop = loop || false; //是否循环 audio.play(); return { end: function(callback) { audio.addEventListener('ended', function() { callback() }, false); } } } $(function() { $("button:first").click(function() { //背景音乐 var audio1 = HTML5Audio('http://www.imooc.com/upload/media/one.mp3') audio1.end(function() { alert("音乐结束") }) }); $("button:last").click(function() { //循环播放那 var audio2 = HTML5Audio('http://www.imooc.com/upload/media/two.mp3') audio2.end(function() { console.log('OK'); }) }) })

查看全部

0 采集收起来源：场景音乐
2018-03-22
微笑的芒果

1. A(function(data1) {//data1=1 B(function(data2){ $(".container").html("嵌套异步:" + data2)//data2:1+2=3 }, data1)//data1=1 }) 2. C : resolve(3), 参数data 返回值是3， then 调用D(data), 因为d.resolve(value+4) 返回值为：3+4=7; then调用E(data) e.resolved(value+5) 返回值为：7+5=12;

查看全部

0 采集收起来源：异步编程梳理
2018-03-22
乔峰之巅

关键帧动画我们已经实现了，那坐标的变化就很简单了，一般来说前端能用到的手段元素.position定位，修改top,left坐标修改通过css3的transform属性的translate 无论用那种需要记住的是元素的坐标都是 position+translate的值的总和圣诞主题我采用的是transition+position的处理 transition是css3引入的"过渡"属性，可以让css的属性值在一定的时间区间内平滑地过渡，考虑兼容性问题，这里会额外引入一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现

查看全部

0 采集收起来源：元素运动实现
2018-03-22
君君小

1.父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度 2.3D视图，设置在父元素上，子元素都可以相对与父元素的平面上进行3D变形操作

查看全部

0 采集收起来源：3D变换的梳理
2015-12-29
君君小

perspective(length)为一个元素设置三维透视的距离。仅作用于元素的后代，而不是元素的本身。

查看全部

0 采集收起来源：3D变换的梳理
2015-12-29
蜗牛_快跑

//浏览器的字体根据浏览窗口的大小而改变。 <script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 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>

查看全部

0 采集收起来源：自适应rem布局
2018-03-22
君君小

rem和em单位一样，都是一个相对单位，不同的是em是相对于元素的父元素的font-size进行计算的，rem是相对于根元素html的font-size进行计算的，这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照关系转化16px=1rem。自适应处理使用rem布局的时候，是兼容不同的分辨率，我们应该要动态修改根字体的大小，让所有的用rem单位的子元素跟着一起缩放，从而达到自适应的效果

查看全部

0 采集收起来源：自适应rem布局
2015-12-29
handsome_小亮 01:42

知识点

查看全部

0 采集收起来源：编程思路
2015-12-29
handsome_小亮

知识点

查看全部

0 采集收起来源：编程思路
2015-12-29
qq_习惯就好_31

这段自适应大小rem很好

查看全部

0 采集收起来源：自适应rem布局
2015-12-28
Narella

ctx.fillStyle ='blue'; ctx.fillRect(110,110,100,100);

查看全部

0 采集收起来源：CANVAS概述
2015-12-27
yjq1401502737

<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <body> <section> <div class="page">rem跟着html:font-size变化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 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>

查看全部

0 采集收起来源：自适应rem布局
2018-03-22
yjq1401502737

自适应rem布局 rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。在我的上个七夕主题中采用的是流式布局( 使用 % 百分比定义宽度，高度大都是用px来固定住)。如果使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是相对父级元素的原因没有得到推广，圣诞主题采用rem布局单位 rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem 自适应处理：使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。慕课的布局是右边区域展示，所以按照移动端的320宽度为标准去做适配的，当然基于这个缩放都是没关系的总结：根据实际情况通过设计稿与当前可视区的大小做一个比例关系，通过这个比例进行缩放处理

查看全部

0 采集收起来源：自适应rem布局
2015-12-27
幸0

16px=1rem

查看全部

0 采集收起来源：自适应rem布局
2015-12-26

首页上一页 14 15 16 17 18 19 20 下一页尾页

0/150

提交

取消

开始学习

课程须知: 本课程为高级案例课程，其中所用的大部分知识点不做深入剖析，只讲解如何使用，部分代码需要由你自己填充。需要具备如下知识： 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想 5、SVG基础知识 6、Canvas基础知识

老师告诉你能学到什么？: 1、rem式布局 2、转场特效 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果 7、H5的视频效果 8、SVG画图 9、canvas画图