页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现。即使在同一种浏览器例如 IE 中,不同版本也有不同的实现。

本文给出两个能兼容目前所有浏览器的 Javascript 函数,能够获得这三个数值。

获取页面大小和窗口大小的 Javascript 函数

函数 GetPageSize 能够获得页面大小和窗口大小。执行这个函数会得到一个包含页面宽度、页面高度、窗口宽度、窗口高度的对象。

这个函数还是很容易读懂的。

继续阅读

// Detect whether device supports orientationchange event, otherwise fall back to the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

继续阅读

这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个
事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,
gestureend三个事件回调:

gesturestart // 当有两根或多根手指放到屏幕上的时候触发
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
gestureend // 当倒数第二根手指提起的时候触发,结束gesture
事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例
)信息和rotation(两根手指间连线转动的角度)信息。
当两根或以上的手指在屏幕上活动的时候,我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
件,touch事件和gesture事件,情况比较复杂。touch已经在第一篇文章里详细介绍,这里就简单带过。
我们还是先看看当分别将两根手指放到屏幕上的时候,会触发哪些事件吧:

相信大家都是用过浏览器提供的输入框自动补全功能。当你在一个输入框中输入并提交过表单之后,浏览器会默默记下提交的内容,当你下次需要提交的时候,只要输入几个包含的字母,输入框下便会出现一个列表罗列处之前填过的内容。

这确实是一个很好用很人性化的功能,但是偶尔的,网站建设者可能希望能阻止浏览器记住用户提交的内容,可能是出于安全因素,也可能是想自定义一个填充,或者其他别的理由。

此时,可以在希望关闭自动补全的输入框上写上autocomplete属性,并定义为off就能实现,此处是 off 而不是一般的 false

继续阅读

因:javascript中的String类自带的length属性 和 substr()方法虽然能判断和截取出字符个数,但是对字节个数却没有处理的方法(众所周知,中文字符占两个字节,英文只占一个)

果:中英文字符在页面上的占位空间存在差异。中文的web开发人员不能一刀切,对中英文都截取同样长度的字符数。

网上大致有两种方法处理中英文字符。一种是把中文字符escape了,然后计算字节长度。一种是用正则表达式把中文字符转换2个字节的符号,然后计算长度

推荐第二种方法,简单明了,速度快,效率高。

按照第二种方法,对javascript 的 String类型做以下扩展:

一.String.len() 方法,计算字符串字节个数:

1 String.prototype.len=function()
2 {
3  return this.replace(/[^\x00-\xff]/g,”rr”).length;
4 }

/*************************************************************
Author      : Yanfu Xie <xieyanfu@yahoo.com.cn>
Url     : http://YITU.org
Description : 正确截取单字节和双字节混和字符串
String str  : 要截取的字符串
Number      : 截取长度
*************************************************************/
function substr(str, len)
{
if(!str || !len) { return ”; }
//预期计数:中文2字节,英文1字节
var a = 0;
//循环计数
var i = 0;
//临时字串
var temp = ”;
for (i=0;i<str.length;i++)
{
if (str.charCodeAt(i)>255)
{
//按照预期计数增加2
a+=2;
}
else
{
a++;
}

有时在显示某段文字的时候,可能会太长,影响我们页面的显示效果。如果仅是英文,那么我们可以用String.substring(start, end)函数就已经够用了。但是通常我们都会遇到既有英文,又有汉字的情况。而汉字是占用2个字节的,如果用String.substring(start, end)截取字符串的话,会发现汉字截取后比英文截取后个数虽然相同,但是长度还是长出去不少(具体要视字符个数来决定)。
为了解决这个问题昨天写了根据字节数截取字符串的函数。
具体使用很简单,跟String.subString(start, end)一样使用就可。比如:var str = “诶必塞第衣爱抚即”; var str1 = str.subCHStr(2, 2); var str2 = str.subCHString(2, 4); alert(str1 + ” == ” + str2);

继续阅读

在开发人物词条的时候,碰到这个问题。某些领导,因为活动众多,介绍相应也多,一个页面将加载很多图片。这样一来,导致整个页面加载很慢。

有什么方法可以避免加载慢呢?

JQuery为我们提供了两种方案:预加载和惰性加载。

预加载:JQuery应用:图片依次加载代码

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

继续阅读

网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。
Lazy loader 是一个延迟加载图片的 jQuery 插件,在一些图片非常多的网站中非常有用,在在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。
Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后在加载 Lazy Load 的 Javascript 文件:

<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>

继续阅读

今天帮优艾点修改一个效果,觉得挺好玩的,就放到这里和大家一起分享下.
原效果是这样的:

提示:您可以先修改部分代码再运行

修改后的效果:
继续阅读