-
封装function Swipe(container)是构造函数，里面生成了一个对象swipe，scrollTo（）方法就是swipe对象的方法，如果不返回它的话，var swipe = Swipe($("#content"));这句代码的运行结果就不是得到你在构造函数里面生成的对象，而是undefined。查看全部
-
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.js"></script>
查看全部 -
position与offset的取值不同点，.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移，一个元素可以嵌套多个position所以这里要特别注意下
查看全部 -
var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
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指定如何改变不同的属性值，才实现了动画。查看全部
-
通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。查看全部
-
这里最后返回swipe是用到闭包中的知识的，可以看到在swipe的scrollTo方法中用到了element元素，当调用scrollTo方法后，不会把该元素当做垃圾释放掉，当第二次调用scrollTo时，此时的element为上次调用后的element，此时便实现了多次调用scrollTo方法时，整个页面移动的连贯性。 可使用下面代码验证： var swipe = Swipe($("#content")); swipe.scrollTo(100, 1000); setTimeout('swipe.scrollTo(200, 1000);',2000);查看全部
-
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 原理： CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。 一个简单的例子： 一张图片作出一个按钮的三个状态 一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active。 <a class="button" href="#">链接</a> 加入右侧的图片为：200px×65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。 a { display:block; width:200px; height:65px; line-height:65px; /*定义状态*/ text-indent:-2015px; /*隐藏文字*/ background-image:url(button.png); /*定义背景图片*/ background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/} a:hover {background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/} a:active {background-position:0 -132px; /*定义链接的普通状态，此时显示的是底部的部分，向下取负值*/} 而更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值，如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。查看全部
-
Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂，实际上我们只要抓住核心的使用就可以了查看全部
-
css3，新添加属性 'transition-timing-function' : 'linear', (变换的方式 匀速进行 ease 为变速) 'transition-duration' : '5000ms',（运动的时间） 'transform' : 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面x轴移动 }) （相对于X轴的负半轴进行移动Y、Z为0）查看全部
-
:nth-child(n) :选择的他们所有父元素的第n个子元素 ：find（） ：通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。 （不包括自己）查看全部
-
页面之间的卷滚切换效果查看全部
-
"雪碧图"缩放原理: 通过CSS3的scale处理可让元素进行缩放。 需要计算出元素的缩放比，可以根据屏幕的宽度与UI的设计比例缩放。 带来的问题： 1. 通过scale缩放后，浏览器认为这个元素尺寸是没有变化的，所以要得到缩放后的尺寸应该是：实际尺寸*缩放比； 2. scale是默认按照中间基点缩放，所以需要计算出实际布局与缩放后布局的一个内部缩放距离，就是一个类似padding一样的数据。查看全部
-
var slides = element.find(">");与var slides = element.find("li");的区别: 经测试，这个find(">")是找出紧邻的子li元素列表，而find("li")会找出所有li元素，包括子li内部的li列表元素。查看全部
举报
0/150
提交
取消