My Blog

ie6支持png透明的方法

Filed under Uncategorized

Mar 15
最近无论是在论坛上还是在群里，都有好多人问，ie6下怎么解决png透明的问题。我今天就说下我用什么方法解决吧。我用的是一个叫DD_belatedPNG的js。刚才特意的google了一下这个东西。以下是对这个东西说明和用法。

DD_belatedPNG使用了微软的VML语言进行绘制的JS实现,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜，而且还支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及，看到了吧，这玩意可是居家旅行杀人越货必备的好东西啊。

用法如下：
1. 1. 下载JS文件，官网地址:http://www.dillerdesign.com/experiment/DD_belatedPNG/
2. 2. 
.main为元素标识名称，多个元素之间用”,“隔开(逗号)，如DD_belatedPNG.fix(‘.png_bg，.main,#DD,.div ul li,img’); 这其中的元素都支持。
Tagged as: DD_belatedPNG, ie6, png透明, 背景平铺

1 Comment
CSS解决未知高度垂直居中

Filed under html

Mar 15

我们先来说一下 display:table-cell;这个属。
以下这段话，是我在搜索出来的摘自小龙女blog
display：table-cell 在css2中的定义只有简单的一句话“table-cell : 　 CSS2　将对象作为表格单元格显示”

css中有一个规则被称为“创建匿名表格元素的规则”，（以下文字整理自蓝色理想一篇文章），举例来说，如果某个元素已经被设置为“display:table- cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为 “display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为 “display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为 “display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少 “display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素。

按照这个思路，display:table-cell;既然能按照表格单元格显示，那表格单元格的属性他也应该具有，于是我写了这样的一个例子

<!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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="蛋蛋,垂直居中,未知高度," /> <meta name="description" content="css实现未知文字高度垂直居中" /> <meta name="copyright" content="Copyright 2008 dandan.in" /> <meta name="author" content="蛋蛋" /> <title>css解决未知文字高度垂直居中办法</title> <style type="text/css"> *{ margin:0;padding:0; } .box{ width:900px; margin:0 auto; } .box ul li{ list-style:none; width:300px; float:left; margin-top:15px; } .div1, .div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;} </style> <link rel="shortcut icon" href="images/favicon.ico" /> <title>css实现未知文字高度垂直居中</title> </head> <body> <div class="box"> <ul> <li> <div class="div1"><img src="http://img2.cache.netease.com/cnews/2009/12/28/20091228081222a24fc.jpg"/></div> <div class="div2"><a href="">文字测试文字测试文字测试文字测试文字测试</a></div> </li> <li> <div class="div1"><img src="http://img2.cache.netease.com/cnews/2009/12/28/20091228081222a24fc.jpg"/></div> <div class="div2"><a href="">文字测试文字测</a></div> </li> <li> <div class="div1"><img src="http://img2.cache.netease.com/cnews/2009/12/28/20091228081222a24fc.jpg"/></div> <div class="div2"><a href="">文字测试文字测试文字测试文字测</a></div> </li> <li> <div class="div1"><img src="http://img2.cache.netease.com/cnews/2009/12/28/20091228081222a24fc.jpg"/></div> <div class="div2"><a href="">文字测试文</a></div> </li> <li> <div class="div1"><img src="http://img2.cache.netease.com/cnews/2009/12/28/20091228081222a24fc.jpg"/></div> <div class="div2"><a href="">文字测试文字测试文字测试文字测试文字测</a></div> </li> </ul> </div> </body> </html>

Tips:You can change the code before run.

测试浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2

Tagged as: 垂直居中, 未知高度

No Comments
position:absolute a对象无法选择问题

Filed under html

Jan 15

前几天，一个mm在群里面问一个问题：这样描述的，一个div里面放一张图片，一个a的大小为图片的大小定位在图片的上面。问题出现了，在FF下鼠标放在图片上有链接可以点，但是在ie6，ie7下没有a的迹象。现在看一下dome。

<!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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="蛋蛋,absolute,position,ie," /> <meta name="description" content="position:absolute ie点不到问题" /> <meta name="copyright" content="Copyright 2008 dandan.in" /> <meta name="author" content="蛋蛋" /> <title>position:absolute ie点不到问题</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:417px; height:224px; position:relative; } .box a{ display:block; width:417px; height:224px; position:absolute; top:0; left:0; z-index:999; } </style> </head> <body> <div class="box"> <img src="http://img6.hxsd.com/newstopic/avatar/ready_pic1.jpg"/> <a href="#"></a> </div> </body> </html>

Tips:You can change the code before run.

当时写这个dome的想法是 a在ie下被图片盖住了，然后给a加背景颜色看看效果。

<!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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="蛋蛋,absolute,position,ie," /> <meta name="description" content="position:absolute ie点不到问题" /> <meta name="copyright" content="Copyright 2008 dandan.in" /> <meta name="author" content="蛋蛋" /> <title>position:absolute ie点不到问题</title> <style type="text/css"> *{ margin:0; padding:0; } body{background:#f00;} .box{ width:430px; height:230px; position:relative; text-align:left; } .box a{ display:block; width:400px; height:200px; position:absolute; top:0; right:0; z-index:999; background:#fff; } </style> </head> <body> <div class="box"> <img src="http://img6.hxsd.com/newstopic/avatar/ready_pic1.jpg"/> <a href="#"></a> </div> </body> </html>

Tips:You can change the code before run.

ie6 ie7 ff 都一致，a没有被图片挡住。既然没有被挡住，就给背景颜色加透明度，透明度为0也可以。

<!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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="蛋蛋,absolute,position,ie," /> <meta name="description" content="position:absolute ie点不到问题" /> <meta name="copyright" content="Copyright 2008 dandan.in" /> <meta name="author" content="蛋蛋" /> <title>position:absolute ie点不到问题</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:417px; height:224px; position:relative; } .box a{ display:block; width:417px; height:224px; position:absolute; top:0; left:0; z-index:999; border:1px solid #000; background:#fff; filter:alpha(opacity=0); -moz-opacity: 0.00; opacity: 0.00; } </style> </head> <body> <div class="box"> <img src="http://img6.hxsd.com/newstopic/avatar/ready_pic1.jpg"/> <a href="#"></a> </div> </body> </html>

Tips:You can change the code before run.

这个是我想出来的解决办法，一直不明白ie下为什么a加了背景色才可以触发layout。

Tagged as: absolute, ie6, ie7, layout, position

3 Comments
展开关闭缓冲效果

Filed under JavaScript

Jan 11

又堕落了有一段时间了，没有认真学js。天天混日子，这段时间一直在做公司内部的系统，系统有一个换肤的功能，之前做的都是一个一个得摆在上面的，随着皮肤的增加，空间有限放不开了。一个同事说，做成百度换肤的那种，点击弹出层，点击关闭。于是我憋了一下午，终于把这个js写出来了。
想法很简单，就是判断div的display是否是显示的还是隐藏的，显示的动画和关闭的动画分别由formula()和close()控制，很简单很基础的一个js。效果大家看一下吧

< !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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="蛋蛋,展开,关闭,运动缓冲效果,javascript" /> <meta name="description" content="展开/关闭 - 运动缓冲效果" /> <meta name="copyright" content="Copyright 2008 icegg.cn" /> <meta name="author" content="蛋蛋" /> <title>展开,关闭,运动缓冲,效果</title> <style type="text/css"> *{margin:0;padding:0;} #tips { width:960px; height:350px; background:#ccc; overflow:hidden; } /*clear*/ .e_clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .e_clear { display:inline-block; } .e_clear { display:block; } </style> </head> <body> <div id="btn" style="cursor:pointer">更换主题</div> <div id="tips" style="display:none;"> </div> <script type="text/javascript"> function expand(){ var btn = document.getElementById("btn"); var obj = document.getElementById("tips"); var status = 0;//0 执行完成, 1 正在执行 btn.onclick = function (){ if(status)return; status = 1; if(obj.style.display == "none"){ obj.style.display = "block"; obj.style.height = "1px"; var formula = function (){ var oh = parseInt(obj.style.height); if(oh < 350){ obj.style.height = (oh + Math.ceil((350 - oh) / 10)) + "px"; }else{ clearInterval(st); status = 0; } } var st = window.setInterval(formula, 1); }else{ var close = function (){ var oh = parseInt(obj.style.height); if(oh > 0){ obj.style.height = (oh - Math.ceil(oh / 15)) + "px"; }else{ clearInterval(st1); obj.style.display = "none"; status = 0; } } var st1 = window.setInterval(close, 1); } } } window.onload = function (){ expand(); } </script> </body> </html>

Tips:You can change the code before run.

这个效果其实jquery 一个函数就搞定了，下面是效果 Read the rest of this entry »

Tagged as: JavaScript, 关闭, 展开, 蛋蛋, 运动缓冲效果

4 Comments
Hello world!

Filed under Uncategorized

Jan 4

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

No Comments
无限循环滚动

Filed under JavaScript

Oct 31

向左滚

< !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>循环滚动</title> <style type="text/css">  </style> </head> <body> <div class="main"> <div class="left"><a onclick="dd(MarqueeL)">向左滚</a></div> <div id="demo" > <div id="indemo"> <div id="demo1"> <ul> <li><img src="http://icegg.flyxin.com/poto/images/first.jpg" alt="ppp1" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/second.jpg" alt="ppp2" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/third.jpg" alt="ppp3" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/four.jpg" alt="ppp4" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/five.jpg" alt="ppp5" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/six.jpg" alt="ppp6" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/third.jpg" alt="ppp7" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/four.jpg" alt="ppp8" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/five.jpg" alt="ppp9" /><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/six.jpg" alt="ppp10" /><p></p></li> </ul> </div> <div id="demo2"></div> </div> </div> <div class="left"><a onclick="dd(MarqueeR)">向右滚</a></div> </div> <script>  </script> </body> </html>

Tips:You can change the code before run.

Read the rest of this entry »

Tagged as: JavaScript, 循环滚动

2 Comments
商城商品展示的一种效果

Filed under JavaScript

Oct 26

最近在学习js，在捣鼓一些小的demo玩。上周可可妞碰到个小问题。正好我之前写过。
先看下效果

< !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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" /> <meta name="description" content="LeoPHP - Powered by HentStduio" /> <meta name="author" content="Leo" /> <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> <style type="text/css"> img {width:179px;height:204px;} *{margin:0px; padding:0;} #poto{ width:1001px; margin:0 auto; } #poto ul{margin-left:-13px;} #poto ul{display:inline-block;} #poto ul{display:block;} #poto ul li{ list-style:none; float:left; margin:13px 0 0 13px; display:inline; position:relative; line-height:0; } #poto ul li p{ width:179px; height:60px; background:#000; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position:absolute; left:0; bottom:0; display:none; text-align:center; line-height:60px; color:#fff; } </style> </head> <body> <div id="poto"> <ul> <li><img src="http://icegg.flyxin.com/poto/images/first.jpg" alt="图片一"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/second.jpg" alt="图片二"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/third.jpg" alt="图片三"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/four.jpg" alt="图片四"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/five.jpg" alt="图片五"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/six.jpg" alt="图片六"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/seventh.jpg" alt="图片七"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/eighth.jpg" alt="图片八"/><p></p></li> <li><img src="http://icegg.flyxin.com/poto/images/first.jpg" alt="图片九"/><p></p></li> </ul> </div> </body> <script type="text/JavaScript">  </script> </html>

Tips:You can change the code before run.

Read the rest of this entry »

Tagged as: JavaScript, 正则表达式, 获取alt值

2 Comments
IE和FF背景图片居中的偏移差异

Filed under 未分类

Jun 28

今天在写一个专题页面，页面的背景宽度是1480px;

< !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" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta content="all" name="robots" /> <base target="_blank" /> <title>IE和FF背景图片居中的偏移差异</title> <style type="text/css"> *{margin:0; padding:0;} body {font-size:12px;font-family: Calibri, Arial, Helvetica, sans-serif;background:#000 url(http://home.blueidea.com/attachment/200906/28/322777_1246156284vVYl.jpg) repeat-y center top;} .edge{width:962px; clear:both; margin:0 auto; background:url(http://home.blueidea.com/attachment/200906/28/322777_1246156021xmxX.jpg) repeat-y;} .banner{width:962px; height:685px; background:url(http://home.blueidea.com/attachment/200906/28/322777_1246155968zkxf.jpg) no-repeat;} .main{width:962px; height:2159px; overflow:hidden;} </style> </head> <body> <div class="edge"> <div class="banner"> </div> <div class="main">  <div class="a e_clear"> <img src="images/a_pic.jpg"/> </div>   <div class="b"> <img src="images/b_pic.jpg"/> </div>   <div class="c e_clear"> <img src="images/c_pic.jpg"/> </div>   <div class="d"> </div>  <div class="e"> </div> </div> </div> </body> </html>

Tips:You can change the code before run.

Read the rest of this entry »

Tagged as: ff, ie, 偏移差异, 居中, 背景图片

4 Comments
ceshi

Filed under 未分类

Jun 24
1. <div id="append_parent"></div><div id="ajaxwaitid"></div>
2. <div id="menu">
3. <span class="avataonline">
4. <cite><a class="dropmenu" id="viewpro" onmouseover="showMenu(this.id)">liuxinghonglei</a></cite>
5. <a href="logging.php?action=logout&formhash=484f70c0">退出</a>
6. </span>
</div><div id="ajaxwaitid"></div> <div id="menu"> <span class="avataonline"> <cite><a class="dropmenu" id="viewpro" onmouseover="showMenu(this.id)">liuxinghonglei</a></cite> <a href="logging.php?action=logout&formhash=484f70c0">退出</a> </span>

Tips:You can change the code before run.
1 Comment

Categories

Recent Articles

Links

Archives

Meta