velocity.js介绍和使用
我们首先来说说为什么要使用 velocity.js 这个库? 大家是否觉得 jquery.easing.js 提供的动画已经足够丰富了 但是今天这个库不仅能兼容最新的 css3 来实现效果 同时这个库也支持使用原生 js 来实现,结合 jquery react 等库 同时也支持模块化 requirejs 的加载方式 只需要配置 shim 参数就行 就像许多开发者确信的那样,在 Web 上使用 CSS 实现动画并不是唯一的方式,我们也可以使用 JS 来实现,并且 JS 还有一些 CSS 无法替代的优势。 然而抛开 JS 而选择 CSS 来实现动画,将以样式表内容膨胀,丧失对动画时间的控制为代价,并且无法灵活地实现基于物理运动模型的动画设计。 不要误导我! CSS 动画在 Web 中扮演重要的角色—–独自的实现动画或是同 JS 协作实现。 特别的,CSS 在一些简单基本的动画交互上表现的特别好,比如 hover 和 focus 等。(作者的意思是:客观的看待 CSS 动画和 JS 动画,他们各有优点) 然而,对于几乎所有事情,JS 都是不错的选择,因为他的能力太强大了。 如果我说 JS ...
Javascript模块化编程:require.js的用法(转载)
一、为什么要用 require.js? 最早的时候,所有 Javascript 代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。
123456<script src="1.js"></script><script src="2.js"></script><script src="3.js"></script><script src="4.js"></script><script src="5.js"></script><script src="6.js"></script>
这段代码依次加载多个 js 文件。 这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于 ...
JavaScript性能优化技巧之函数节流
今天我们来说一说这个函数截流,以前写代码的时候只是为了达到目的以及实现效果并没有更多的考虑性能,函数截流说起来那么高大上,那么到底什么地方我们才会用到呢? 当平凡发生对 dom 操作的时候,这个时候就会影响整个页面的性能造成页面卡顿等等。 下面看看我们使用函数截留后页面的效果 最近从新改版和搭建自己的博客 优化了自己的弹出框组件 这其中使用到了组件化和模块化的思想 结合 requirejs 管理包 velocity.js 来实现动画效果(为什么不使用 css3 ?当然我也是不反对的,最重要的是兼容性) 低版本浏览器下面也能够观察到效果 关于其它优雅降级等暂时没有做考虑 因为这个博客只是技术方面所以肯定要抛弃一些个浏览器比如说 ie9 id10 以下的浏览器 大部分看这博客的人我想也是技术方面的 用的那肯定是谷歌火狐 safri 等现代浏览器。所以一开始 我的目标群体不是全部受众
说到这里我们来说说什么事函数截流?在前端开发中,有时会为页面绑定 resize 事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定 mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正 ...
更快学习 JS 的 6 个简单思维技巧(转载)
当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战:有些概念容易混淆,特别是当你学习过其他语言的时候。 很难找到学习的时间(有时候是动力)。 一旦当你理解了一些东西的时候,却很容易再一次忘记。 可以使用的工具甚多且经常变化,所以不知道从哪里开始入手。 幸运的是,这些挑战最终都可以被战胜。在这篇文章里,我将介绍 6 个思维技巧来帮你更快的学习 JavaScript ,让你成为一个更快乐更多产的程序员。
1.不要让将来的决定阻止你进步
对于很多学习 JavaScript 的人来说,他们问的第一个问题是选用哪个框架(现有框架非常多)。但是如果你还不熟悉原生的 JavaScript ,那这就是个不该问的问题。你会花费你全部的时间去查询不同的框架并且不会取得任何进展。 走出这个让人犹豫不决的陷阱的一个方法是要有一个学习的路线图。比如,要想成为一个前端开发人员,你的路线图大概是这样的: 把学习计划进一步拆分,你可以只用 HTML 和 CSS 做一个功能性的网页。了解其中的具体步骤,你会很容易知道现在需要关注的东西,因此不会浪费时间担心将来要学习的内容。 如果 ...
css3技巧——产品列表之鼠标滑过效果translateY
`
Wonder Girls
Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...
查看全文
Wonder Girls
Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...
查看全文
Wonder Girls
Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...
查看全文
Wonder Girls
Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...
查看全文
`
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 ...
商城系统图片放大镜效果(注意这里我已经不再兼容ie6了,因为份额的确很低了!)
最近准备做一个简单的开源的商城系统,因为自己一个人做呢,然后没有美工,这个怎么办? 所以我采用了流行的 bootstrap 框架来做,后台的话采用的也是一个基于 bootstrap 的一个后台框架系统 前台即将要使用到的技术:jquery + bootstrap+angularjs 等 后台即将要使用到的技术:php+mysql+memecache(基于新浪 sae 博主没有自己的服务器,所以只能使用第三方的 memecache 服务器 然后 php 端使用 curl 进行通信获取数据)+bootstrap +angularjs+jquery +thinkphp 在做前台商城商品展示页面的时候我本来想显示图片就够了 但是这样怎么能行 为了巩固自己的知识 以及 js 基础 决定做一个仿照凡客诚品的一个放大镜效果。 这其中需要了解的就是 jquery 中 width innerWidth outerWidth 这三者的关系 已经鼠标事件的一些个属性比如 pageX pageY clientX clientY 的使用 (后面也可以考虑使用 offset) 这个放大镜效果在 bootstrap ...
js正则表达test、exec和match的区别
test 的用法和 exec 一致,只不过返回值是 true false。 以前用 js 很少用到 js 的正则表达式,即使用到了,也是诸如邮件名称之类的判断,网上代码很多,很少有研究,拿来即用。 最近开发遇到一些需要使用正则表达式,顺便研究一下 正则表达式对象有两个定义方式:: 1、第一种定义:
1new RegExp(pattern, attributes);
如 var reg = new RegExp(“abc”,”g”) 其中 pattern 为表示表达式内容,如上表示匹配 abc attributes:g,全局匹配,i 不区分大小写,m 执行多行匹配,用最多的为 g 和 i 2、第二种定义:/pattern/attributes. 如:
1var reg = /abc/g;
正则表达的规则一些规则在此不再说明,只记录 exec 和 match 的区别: 1、exec 是正则表达式的方法,而不是字符串的方法,它的参数才是字符串,如下所示: 如上定义
1234var reg = new RegExp("abc") ;var ...
欢迎来到HTML5.2时代!
21 世纪,2016 年 6 月,HTML 5.1 从工作草案变为了候选标准。正如你了解的那样,这是将提案变为标准的第二步,Web 的如此发展也将影响我们的日常生活。作为候选标准,W3C 认为 HTML 5.1 已经通过了 review 并且能够满足工作组的技术需求了。
几天前,HTML 5.1 被提案进入第三阶段:推荐标准(PR)。这意味着这个规范只需要进行微量的修改就可以进入 W3C 标准的最后一阶段了。
随着 HTML 5.1 接近最后阶段,工作组开始关注于未来。于是工作组正式开始研究 HTML 5.2 工作草案,因此,W3C 在社区中发布了HTML 5.2 规范来让 W3C 成员、公众以及其他组织进行 review。
HTML5 凭借语义性、兼容性和不需要第三方依赖的 API 迅速席卷了整个互联网。这是一场革命性的技术变革。HTML 5.1 保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想 HTML 5.1 都带来了什么,可想而知 HTML 5.2 会更为惊艳。
在本文中,我将做一个关于 HTML 发展的简短的概述,包括 HTML 5,HTML 5.1,和 HT ...
页面导入样式时,使用link和@import有什么区别?
有 4 种方式可以在 HTML 中引入 CSS。
1.内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。 示例:
123 <div style="background: red;"></div>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 拥有相同的样式,你不得不重复地为每个 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
2.嵌入方式嵌入方式指的是在 HTML 头部中的 标签下书写 CSS 代码。 示例:
12345678910 <head> <style> .content { background: red; } </style></head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通 ...
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
CSS 规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认的 display 值, 比如 div 默认 display 属性值为“block”,成为“块级”元素; span 默认 display 属性值为“inline”,是“行内”元素。 行内元素: a - 锚点, em - 强调, strong - 粗体强调, span - 定义文本内区块, i - 斜体, img - 图片, b - 粗体, label - 表格标签, select - 项目选择, textarea - 多行文本输入框, sub - 下标, sup - 上标, q - 短引用, 块元素: div - 常用块级, dl - 定义列表, dt, dd, ul- 非排序列表, li, ol-排序表单, p-段落, h1,h2,h3,h4,h5-标题, table-表格, fieldset - form 控制组, form - 表单, 空元素: br-换行, hr-水平分割线 鲜为人知的是:





