js

分享一个大家熟悉不能在熟悉的一个图片懒加载效果

在前几年b2c特别火爆的年代,电商公司的网站主要是以图片展示为主,大家也知道图片加载的多了必然会影响网站的打开速度,当时我在的公司也是做电商的,领导一直督促技术部对网站进行优化,当时就去网上查啊查,记得网上有一个非常流行的一个图片缓加载的插件叫 jquery.lazyload,当时我也用了这个插件,但是感觉效果并不明显,后来用firebug调试发现根本就没有实现缓加载,他的实现原理是网站加载完毕后批量替换图片的src为站位图片,当用户滚动屏幕的时候图片进入可视区域在把真实路径替换过来等于是脱裤子放屁费了二遍事,后来我在他的实现基础上写了一个自己的图片缓加载效果,感兴趣的同学可以点击下面的连接查…阅读全文

时间倒计时特效

以前在工作项目中用了很多的js特效,最近有了自己的博客暂时没什么内容就把之前做过的js效果整理一下丰富丰富我的博客,这次分享的是一个js倒计时的效果,是之前在一个专题页面限时抢购用到的,下面是演示地址 演示地址:demo

JavaScript toFixed() 方法

定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 语法 NumberObject.toFixed(num) 参数 描述 num 必需。规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有 些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。 返回值 返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字。如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度。如果 num 大于 le+21,则该方法只调用 NumberObject.toString(),返回采用指数计数法表示的…阅读全文

ECMAScript 类型转换

转换成字符串 ECMAScript 的 Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。 例如,要获得字符串的长度,可以采用下面的代码: var sColor = “red”; alert(sColor.length); //输出 “3” 尽管 “red” 是原始类型的字符串,它仍然具有属性 length,用于存放字符串的大小。 总而言之,3 种主要的原始类型 Boolean 值、数字和字符串都有 toString() 方法,可以把它们的值转换成字符串。 提示:您也许会问,“字符串还有 toString() 方法吗,…阅读全文

ECMAScript 定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象。ECMAScript 拥有很多创建对象或类的方法。 工厂方式 原始的方式 因为对象的属性可以在对象创建后动态定义,所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码: var oCar = new Object; oCar.color = “blue”; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); }; 在上面的代码中,创建对象 car。然后给它设置几个属性:它的颜色是…阅读全文

Swipe JS – 移动WEB页面内容触摸滑动类库

想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很 常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触摸操作也是移动设备的中一个特性,我们必须专业化的处理,哈哈。其实实现原理很简单,但 平常中自己开发不是很方便。 今天就为大家带来这样子的一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。 Swipe函数介绍 下面就为大…阅读全文

html5 canvas 实现图片合成

前段时间在公司做了个服装diy的项目,用到了html5 canvas的图片处理功能,项目的实现方法是先用3d建模,把渲染的服装拆分成碎片,在用js、jquery、html5等技术对服装的碎片组合成一张图片,下面是项目中用到html5canvas图片合成的一个小案例分享给大家 演示地址:demo

JS模块加载器,媲美sea.js

我比较追求简单的代码实现复杂的效果,平时和工作中的代码编写风格尽量做到一行搞定绝对不用两行,之前了解过一些模块加载器,其实无非就是动态添加一些css、js引入,于是乎写了一个很简单好用的模块加载器,同样实现了这样的效果分享给大家: <script> //载入模块 function use(module, callback, charset){     var i = 0, head = document.getElementsByTagName(‘head’)[0];     var module = module.replace(/\s/g, ”);     var iscss…阅读全文

网站回复时间格式化为文字描述

最近公司项目里的时间产品要改成像很多网站的文章发表时间或者回复时间那样,标记为刚刚、半小时前、或者几天前,于是自己也写了一个分享给大家,做这个效果的时候我才发现我还不知道一秒等于1000毫秒,汗! function ChangeTime(obj) { var newdate = new Date(obj), date = new Date(), s = date – newdate; //半小时以内的【刚刚】 if (s < 30 * 60 * 1000) { return ‘刚刚'; } if (s > 30 * 60 * 1000 && s < 60 * …阅读全文

详解 HTMLElement 对象属性和方法

HTMLElement 对象的属性 一个 HTML 文档中的每个元素都有和元素的 HTML 属性对应的属性。这里列出了所有 HTML 标记都支持的属性。其他的属性,都特定于某种具体的 HTML 标记。HTMLElement 对象继承了 Node 和 Element 对象的标准属性,也实现了下面所描述的几个非标准属性: className 规定元素的 class 属性。注意:该属性名不是 “class”,因为 “class” 是 JavaScript 中的保留字。类型:String。状态:可写。 currentStyle 这一特定于 IE 的属性应…阅读全文