koyoz's blog http://koyoz.com/blog/ 天高云淡，让心情旅行。 Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Wed, 08 Sep 2010 09:22:17 +0000 30 http://koyoz.com/blog/?action=show&id=277 不用jQuery也来做动画 koyoz jQuery 框架用的人越来越多了, 无论是性能还是功能强大都不用多说.

不过随着新版本的升级, 体积也慢慢变大了.

24KB, Minified and Gzipped 155KB, Uncompressed Code

压缩并gzip输出24K, 也不小了.

如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.



阅读全文

]]> http://koyoz.com/blog/?action=show&id=277 javascript 2010-03-30 15:42 http://koyoz.com/blog/?action=show&id=268 IE6下通过a标签点击切换图片的问题 koyoz IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.

不过, 国内大部分用户还是在用IE6.

IE6下通过a标签的onclick事件切换某个图片时, 有可能出现图片无法加载问题, httpwatch抓取表现结果是abort.

测试了一下,找到了解决办法.

a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样:

1. <a href="javascript://" onclick="dosomething()">a1</a>

2. <a href="javascript:void(0)" onclick="dosomething()">a2</a>

3. <a href="###" onclick="dosomething()">a3</a>

第三种方法dosomething()中切换图片完全没有问题, 但是href="###" 却带来了另一个问题, 占用了锚点,页面URL也不美观.

第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载.

只要在dosomething();后面增加一个return false;就可以解决了.

如果是绑定事件, 同样在function最后增加return false;就行.

 

]]> http://koyoz.com/blog/?action=show&id=268 javascript 2010-02-24 22:57 http://koyoz.com/blog/?action=show&id=260 javascript取消文本选定 koyoz 最近在做拖动布局. 发现有文本选定的时候, 进行拖动很不好看.

javascript选定文本取消, 能兼容所有主流浏览器了:

if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}

对于文本框(input,textarea)中的文本选定取消, 这种方法会有一些问题.

不过也有办法, 记录下文本框中的value,再清空,再重新赋值. 方法有点搓, 不过能兼容所有浏览器.

 

]]> http://koyoz.com/blog/?action=show&id=260 javascript 2009-12-30 11:10 http://koyoz.com/blog/?action=show&id=259 比较有效的javascript无提示关闭窗口 koyoz 比较有效的javascript无提示关闭窗口. _self也可以换成_top/_parent之类的用于关闭顶层/父级窗口. 
一般浏览器中都OK的.  如果有更好的方法, 不吝赐教.
 
<script type="text/javascript">
window.opener = null;
window.open('', '_self', ''); 
window.close();
</script>
]]> http://koyoz.com/blog/?action=show&id=259 javascript 2009-12-23 14:02 http://koyoz.com/blog/?action=show&id=257 javascript中的var_dump koyoz php中的var_dump很方便.

void var_dump ( mixed $expression [, mixed $expression [, $... ]] )

此函数显示关于一个或多个表达式的结构信息，包括表达式的类型与值。数组将递归展开值，通过缩进显示其结构。

配合上xdebug (Variable Display Features), 还能够根据不同变量类型使用不同颜色区分.

 

现在javascript也能做到类似php中var_dump的效果了. Shuns封装了一个Dump函数:



阅读全文

]]> http://koyoz.com/blog/?action=show&id=257 javascript 2009-12-17 15:59 http://koyoz.com/blog/?action=show&id=250 JavaScript是否可多线程 — 深入理解JavaScript定时机制 koyoz 容易欺骗别人感情的JavaScript定时器

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如



阅读全文

]]> http://koyoz.com/blog/?action=show&id=250 javascript 2009-12-01 13:20 http://koyoz.com/blog/?action=show&id=247 jQuery图形化设计工具-IxEdit koyoz IxEdit 是一款图形化的jQuery所见即所得设计工具. 只要简单的设定参数就可以方便的进行各种DOM操作, 事件绑定, 动画设置等等. 设置页面完成之后, 点击"Deploy"就可以生成相应的javascript代码了. 把代码贴到页面中, 复杂的编码工作就简单完成了.



阅读全文

]]> http://koyoz.com/blog/?action=show&id=247 javascript 2009-11-26 10:31 http://koyoz.com/blog/?action=show&id=244 很有创意的滚动条时钟动画 koyoz 一款很有创意的时钟js动画.

是利用系统滚动条来构成一个 时:分:秒 的盘. 再利用滚动条的长度变化做过渡动画.

是基于MooTools来做的. 效果比较平滑.

看图: 大小: 13 K 尺寸: 500 x 185 浏览: 14 次 点击打开新窗口浏览全图

本站演示地址: http://koyoz.com/demo/html/clock/clock.html

转自: http://toki-woki.net/p/scroll-clock/ (需要翻墙)

]]> http://koyoz.com/blog/?action=show&id=244 javascript 2009-11-23 13:15 http://koyoz.com/blog/?action=show&id=225 用onpropertychange,oninput事件解决onchange事件的不足 koyoz 用onpropertychange,oninput事件解决onchange事件的不足.

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.

但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.

好了, 以下是演示例子, 主流浏览器都没问题:

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title>
<style type="text/css">
*{font-size:14px;font-family:'Comic Sans MS', Verdana}
body {margin-left:20px}
</style>
</head>

<body>
<p>使用onchange事件: </p>
<input type="text" id="txt1" />
<p>使用onpropertychange/oninput事件: </p>
<input type="text" id="txt2" />
<p>结果:</p>
<input type="text" id="txt" />


<script type="text/javascript">
var $ = function(o) {
return document.getElementById(o)
};

$('txt1').onchange = function() {
$('txt').value = this.value;
}

$('txt2').onpropertychange = function() {
$('txt').value = this.value;
}

if (window.addEventListener) {
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false);
}
</script>
</body>
</html>[/html]

]]> http://koyoz.com/blog/?action=show&id=225 javascript 2009-02-12 00:04 http://koyoz.com/blog/?action=show&id=224 js中String的常用扩展 koyoz js中String的常用扩展,包括trim,检查中文,url,emal,电话号码,转类型等



阅读全文

]]> http://koyoz.com/blog/?action=show&id=224 javascript 2009-02-11 11:09 http://koyoz.com/blog/?action=show&id=222 js不同浏览器检测 koyoz 包括IE,FF,safari,chrome,opera主流浏览器的检测

JavaScript代码
  1. ie = '\v'=='v';   
  2. ie = !!top.execScript;   
  3. ie = /*@cc_on!@*/!1;   
  4. ie8 = !!window.XDomainRequest;   
  5. IEVersion = 0/*@cc_on+ScriptEngineMajorVersion()@*/;   
  6. ff = /a/[-1]=='a';   
  7. ff3 = (function  x(){})[-5]=='x';   
  8. ff2 = (function x(){})[-6]=='x';   
  9. safari=/a/.__proto__=='//';   
  10. chrome=/source/.test((/a/.toString+''));   
  11. opera=/^function \(/.test([].sort);  
]]> http://koyoz.com/blog/?action=show&id=222 javascript 2009-02-08 18:38 http://koyoz.com/blog/?action=show&id=221 firefox中点击后退按钮后,不记录表单状态的方法 koyoz 方法有两种:

1. 使用autocomplete属性 

XML/HTML代码
  1. <input name="submit" autocomplete="off" type="submit" value="提交" />  

这样，后退或刷新页面时，Firefox就不会自动记忆表单状态了。

2. 使用window.onpageshow 事件, window.onload 事件无法在后退的页面中触发，但这个可以.

在onpageshow 这个事件中 处理表单的状态即可, 具体代码就根据实际情况编写了.

]]> http://koyoz.com/blog/?action=show&id=221 javascript 2009-02-08 16:36 http://koyoz.com/blog/?action=show&id=220 JS中统计一个函数运行的次数,无需全局变量[原] koyoz JS中统计一个函数运行的次数,无需全局变量

JavaScript代码
  1. function koyoz()   
  2. {   
  3.     var cl = arguments.callee;   
  4.     if (!cl .count) cl.count = 0;   
  5.     cl.count ++;   
  6.     alert("第" + cl.count + "次运行")   
  7. }  

 

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS中统计一个函数运行的次数 by koyoz.com</title>
<script type="text/javascript">
function koyoz()
{
var cl = arguments.callee;
if (!cl .count) cl.count = 0;
cl.count ++;
alert("第" + cl.count + "次运行")
}
</script>
</head>

<body>
<button onclick="koyoz()">执行koyoz()</button>
</body>
</html>[/html]

]]> http://koyoz.com/blog/?action=show&id=220 javascript 2009-02-06 21:38 http://koyoz.com/blog/?action=show&id=212 免费使用google的javascript CDN koyoz 说javascript的CDN,概念是有点大.

但是google给我们提供了热门Javascript Framework 的Host, 由于使用CDN(Content Delivery Network), 世界任何一个地方都能很快的访问到,并且默认是gzip输出,各种优化细节google都帮你做好了.



阅读全文

]]> http://koyoz.com/blog/?action=show&id=212 javascript 2009-01-17 16:08 http://koyoz.com/blog/?action=show&id=210 jQuery 1.3发布了 koyoz jQuery1.2.6后,等了这么长的时间,jQuery1.3终于正式版发布了.

去官方看了下介绍:http://docs.jquery.com/Release:jQuery_1.3

这次改进和更新的东西比较多:提升效率,更强的选择器,新增live方法,Event对象,suport对象,重写了append, prepend, before, after,offset等等.更多细节需要看官方文档.

下载地址:http://jqueryjs.googlecode.com/files/jquery-1.3.js (114K)

 

]]> http://koyoz.com/blog/?action=show&id=210 javascript 2009-01-15 19:06 http://koyoz.com/blog/?action=show&id=200 [原创]用jQuery实现的菜单下划线动画效果 koyoz 前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来.

自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,不会干扰到页面其他的内容.

借助了jQuery的功效,对各大浏览器的支持也很好~

看演示: http://www.koyoz.com/demo/html/menu/link.html



阅读全文

]]> http://koyoz.com/blog/?action=show&id=200 javascript 2008-12-11 20:47 http://koyoz.com/blog/?action=show&id=179 一些播放器控制代码 koyoz 一些播放器控制代码

虽然有点老了.留着收藏备用吧.

包含mediaplayer和realplayer的控制



阅读全文

]]> http://koyoz.com/blog/?action=show&id=179 javascript 2008-10-27 21:44 http://koyoz.com/blog/?action=show&id=176 javascript中window.open参数详解 koyoz window.open

说明: 打开一个新窗口，并装载URL指定的文档，或装载一个空白文档，如果没提供URL的话。

语法: window = object.open([URL[,name[,features[,replace]]]])  



阅读全文

]]> http://koyoz.com/blog/?action=show&id=176 javascript 2008-10-23 23:50 http://koyoz.com/blog/?action=show&id=129 javascript对select元素的option操作 koyoz 添加select的option

IE6,IE7,FF均能支持:

JavaScript代码
  1. var op = new Option();   
  2. op.text = 'koyoz';   
  3. op.value = 'koyoz.com'  
  4. select.options.add(op);  

修改select的option的值

IE6,IE7,FF均能支持:

JavaScript代码
  1. options[i].text = 'koyoz';   
JavaScript代码
  1. options[i].innerHTML = 'koyoz';   

删除一个select的option

IE6,IE7,FF均能支持:

JavaScript代码
  1. select.options[i] = null;  

 

呵呵,感谢CSSRAIN纠正.

]]> http://koyoz.com/blog/?action=show&id=129 javascript 2008-08-17 21:51 http://koyoz.com/blog/?action=show&id=99 IE 的 DomReady koyoz 当我们想在页面加载之后执行某个函数，肯定会想到onload了

但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。

如果只需要对DOM进行操作，那么这时就没必要等到页面全部加载了。我们需要更快的方法。



阅读全文

]]> http://koyoz.com/blog/?action=show&id=99 javascript 2008-07-03 19:00