-
e.target 是目标对象，e.event是目标所发生的事件。查看全部
-
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。查看全部
-
绘制形状 在svg中绘制多边形的标签是polygon，这是SVG中定义的基本形状，可以通过polygon的points绘制出多边形组成的坐标点，points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边，所以points至少要定义3组坐标才能创建一个三角图形。可以观察下points中是由6组坐标绘制的一个五角星图（当然我是用工具生成的坐标） 填充颜色 默认svg会用是黑色填充颜色，所以我们需要设置新的颜色。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。 线性渐变 使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient> 1. 渐变色元素必须要放到defs元素中； 2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。 3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下： offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。 stop-color属性：这个很简单，定义了该成员色的颜色。 stop-opacity属性：定义了成员色的透明度。 x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。 4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。查看全部
-
deferred对象是jQuery对Promises接口的实现
详解见https://www.cnblogs.com/losesea/p/4415676.html
var dtd=$Deferred();//创建 dtd.resolve(); //成功 dtd.then(); //执行回调
查看全部 -
1.background-size解决自适应问题
2.运动=关键帧+坐标变化（position+translate）
3. transition-property: width;(过渡的CSS属性的名称) transition-duration: 1s;(过渡效果花费的时间。默认是 0。) transition-timing-function: linear;(过渡效果的时间曲线。默认是 "ease"。) transition-delay: 2s;(过渡效果何时开始。默认是 0。) 简写：$(".bird").transition({ 'right': "3rem",}, 10000,'linear',function(){ alert("结束")});查看全部 -
观察者模式实现页面切换即场景切换查看全部
-
学习一下这里的js代码封装查看全部
-
对于background-position-x: x;和background-position-y: y;而言，在Firefox和IE中是不支持的，需使用标准书写方式：background-position: x y; 对于steps(counts,end/start)函数，此函数作用于animation-name中动画函数的相邻两个状态之间，将两个状态之前拆分成counts个帧，因此使用steps()是和animation-name中的对应为：如果animation-name函数中的状态为始末两种，则使用counts>1,将始末两个状态拆分成需要的个数；如果animation-name函数中的状态为多于始末两个状态时，则counts=1，不进行拆分；查看全部
-
设置3d效果需要在父元素上设置transform-style:preserve-3d;这样子元素才拥有了3d效果，如果孙元素也要有那么需要在子元素上也设置此属性。 父元素设置perspective:length属性之后子元素才可以看到三维视觉 最后需要在子元素上设置x/y/z轴上的旋转角度 transform:rotatex/y/z(number deg)查看全部
-
场景音乐-圣诞节查看全部
-
具体我来归纳下改良的技术方案与涉及到的知识点： 1.为了处理自适应的问题，采用了新的rem布局代替百分比布局方案 2.采用了简单的面相对象编程，采用类的形式对每一个页面场景元素都做了一定的封装 3.引入了Observer观察者模式的处理机制 4.适当的引入svg概念，通过svg绘制矢量图 5.精灵动画部分依旧大量采用了css3 animation动画的steps关键帧，但是不同的是，解决了自适应雪碧图的问题 6.元素运动部分优化了css3 transform transition的使用 7.新增了video视频元素的运用 8.新增了3d旋转木马的效果实现 9.新增了canvas版的雪花实现 10.等等.............查看全部
-
/** * 开窗 * @return {[type]} [description] */ pageA.prototype.openWindow = function(callback) { var count = 1; var complete = function() { ++count if (count === 2) { callback && callback(); } } var bind = function(data) { data.one("transitionend webkitTransitionEnd", function(event) { data.removeClass("window-transition") complete() }) } bind(this.$leftWin.addClass("window-transition").addClass("hover")) bind(this.$rightWin.addClass("window-transition").addClass("hover")) }查看全部
-
关键帧动画查看全部
-
call和apply是改变函数中this的指向，trigger函数中用apply是为了直接将函数中trigger函数中带的参数（除第一个事件名），直接用到之前绑定的函数中，例如： observer.subscribe("test",function(a,b){...}); //该函数如果带有this，在publish中会指向observer observer.publish("test",a,b);查看全部
-
天空之城!查看全部
举报
0/150
提交
取消