5个小巧但有用的js

1. 修正IE6不支持透明png:DD_BelatedPNG

• Created by: Drew Diller
• License: MIT
• Usage: Fixes alpha-transparent PNGs in IE6
• Size: 6.86kb (compressed)
• Compatibility: IE6 only
• View Demo
• Download

用法

用法超简单,因其只在IE6中使用,故使用条件注释将js文件引入,如下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>

<![endif]-->

DD_belatedPNG提供了唯一的fix方法,所需的参数可以是css选择器,该选择器指向了img标签或具有透明背景图片的标签都可以.示例如下:

<script type="text/javascript">

DD_belatedPNG.fix(".linkButton");

</script>

上面这段js最好也添加条件注释以保证它只在IE6中起作用.该js修正png问题近乎完美,它在背景图片设置了background-position或repeated,以及hover状态下都工作正常.

2. 在网页上使用自定义字体:Cufon

• Created by: Simo Kinnunen
• License: MIT
• Usage: Allows embedding of non-standard fonts without needing flash
• Size: 17.8kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

用法

cufon在使用前需要做一点准备工作,你需要将你的自定义字体生成一个js文件,cufon website可以帮你做这件事.然后将cufon.js和你的自定义字体js引入页面:

<script type="text/javascript" src="cufon.js"></script>

<script type="text/javascript" src="你的自定义字体.js"></script>

然后告诉cufon那些地方需要使用自定义字体:

<script type="text/javascript">

Cufon.replace('h1.replacedFont');

</script>

cufon提供了API接口让你可以在同一个页面使用多种自定义字体,有兴趣的自己研究.

3. 在任何浏览器中使用firebug:Firebug Lite

• Created by: Mike Ratcliffe
• License: BSD-style
• Usage: All the power of Firebug in browsers other than Firefox
• Size: 76.9kb (compressed)
• Compatibility: All non-Firefox browsers
• View Demo
• Download

用法

Firebug的大名我再介绍一下:史上最伟大的web开发调试利器;它是firefox上最好的插件.Firebug Lite可以让你在任意网页上使用firebug,无需下载安装,只需要在网页上引入一个js文件:

<script type="text/javascript"

src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

你也可以直接在网页地址栏输入:

javascript:var firebug=document.createElement('script');

firebug.setAttribute('src','

http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);

(function(){if(window.firebug.version){firebug.init();}

else{setTimeout(arguments.callee);}})();void(firebug);

来调用firebug lite.

4. 驱动交互式3D图形:Raphael JS

• Created by: Dmitry Baranovskiy
• License: MIT
• Usage: Draw SVG shapes on the page
• Size: 58.4kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

raphael.js有点庞大,但是该js的功能也很强大.他能完美控制SVG,使你能在web上作画.

用法

<script type="text/javascript" src="raphael.js"/>

开始作画:

<script type="text/javascript">

var canvas = Raphael(50, 50, 620, 100);

var shape = canvas.rect(0, 0, 500, 100, 10);

shape.attr("fill", "#fff");

canvas.text(250,50,"Using Raphael to create custom shapes\

ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");

</script>

这个js的功能会让你出乎意料,(其实我也没用过).

5. 让你的网站面向未来:Modernizr

• Created by: Faruk Ateş and Paul Irish.
• License: MIT
• Usage: Detect HTML5 and CSS3 support
• Size: 7kb (compressed)
• Compatibility: All
• View Demo
• Download

google一度为我们展示了HTML5和CSS3的魅力,但目前位置大多数的浏览器并不支持新的标准.modernizr.js检验当前浏览器环 境是否支持这些新的特性,比如<audio>和<video>等.例如当前浏览器支持audio,那么 modernizr.audio的返回值为ture.modernizr还可以应用新特征的元素追加样式,如页面中有一个<audio>元 素,modernizr会根据监测对该元素添加.audio或.no-audio样式.modernizr做的事情就是这样简单.

你可以在此基础上放心的使用HTML5和CSS3的新特征,然后根据modernizr的返回值和样式决定你要做些什么.例如在一个支持audio的浏览器中播放音频,而在一个不支持的浏览器中提供一个下载链接.

用法

引入js文件

<script type="text/javascript" src="modernizr-1.0.min.js"></script>

加入特定的样式

.no-audio #audioContainer { display:none; }

页面html代码:

<div id="audioContainer">

<audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>

</div>

<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>

另一种方法,直接用js判断:

if (Modernizr.audio) {

var audioLink = document.getElementById("linkToAudio");

audioLink.style.display = "none";

}

达到目的:支持的可见,不支持的隐藏

出自：http://www.jmouse.cn/?p=329