纸头折飞机
欢迎大家加入KitJs官方高级QQ群88093625,讨论前端技术,上海携程招聘H5,iOS,android,产品,设计,交互,测试,有意者发简历到xueduanyang1985@163.com
随笔 - 48,  文章 - 2,  评论 - 595,  阅读 - 57万

原文地址:http://www.cssesu.com/javascript-jquery/213.html

我们知道 IE6 是不支持透明的 PNG-24 的,这无疑限制了网页设计的发挥空间。

然而整个互联网上解决这个 IE6 的透明 PNG-24 的方案也是多不胜数,从使用 IE 特有的滤镜或是使用透明 GIF 替代。但是这些方法都有一个缺点,就是不支持 CSS 中 backgrond-position 与 background-repeat 。

而我今天介绍 DD_belatedPNG ,只需要一个理由,就是它支持 backgrond-position 与 background-repeat ,这是其他 js 插件不具备的.同时DD_belatedPNG 还支持 a:hover 伪类属性,以及 img 标签。具体有关于 DD_belatedPNG 的详细介绍请阅览官方文档:http://www.dillerdesign.com/experiment/DD_belatedPNG/ 这里就不提供翻译了。因为本人是英语界的菜鸟而不是泰斗,呵呵。

接下来我给大家介绍下它的使用方法,其实方法很简单见如下步骤:

1.首先下载调用该 js 插件(DD_belatedPNG)如下地址:

0.0.8a.js (官方未压缩版本, ~12Kb) 0.0.8a-min.js (官方压缩版, ~7Kb) 

2.之后在使用 PNG-24 图片页面中的 head 标签里引用代码如下:

1<!--[if IE 6]>
2<script src="../js/DD_belatedPNG.js" type="text/javascript"></script>
3<script type="text/javascript">DD_belatedPNG.fix('*');</script>
4<![endif]-->

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。

1<script type="text/javascript">
2DD_belatedPNG.fix('#box, img');
3</script>

或者

1<script type="text/javascript">
2DD_belatedPNG.fix('.header, background');
3</script>

等,这些可以简写成

1<script type="text/javascript">
2DD_belatedPNG.fix('#box-one, .header, img, background');
3</script>

在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。

1<script type="text/javascript">
2DD_belatedPNG.fix('*');
3</script>

okay,有关 DD_belatedPNG 的 js 插件的介绍和使用就这么多,期待大家来分享更多的应用方法!

 

 

posted on   薛端阳  阅读(2841)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示