IT博客-linus2k-随笔分类-网页设计http://www.cnitblog.com/linus2k/category/7015.html君子常当当的博客zh-cnMon, 26 Sep 2011 14:53:05 GMTMon, 26 Sep 2011 14:53:05 GMT60纪念记忆力衰退之Javascript替换变量http://www.cnitblog.com/linus2k/archive/2010/11/19/71484.html君子常当当君子常当当Fri, 19 Nov 2010 03:46:00 GMThttp://www.cnitblog.com/linus2k/archive/2010/11/19/71484.htmlhttp://www.cnitblog.com/linus2k/comments/71484.htmlhttp://www.cnitblog.com/linus2k/archive/2010/11/19/71484.html#Feedback0http://www.cnitblog.com/linus2k/comments/commentRss/71484.htmlhttp://www.cnitblog.com/linus2k/services/trackbacks/71484.html
如果要替换一个变量呢?
var s= "abc";
str.replace(new RegExp(s,"g"),"world");

君子常当当 2010-11-19 11:46 发表评论
]]>纪念记忆力衰退之区别不同浏览器，CSS hack写法http://www.cnitblog.com/linus2k/archive/2009/07/09/59956.html君子常当当君子常当当Thu, 09 Jul 2009 03:17:00 GMThttp://www.cnitblog.com/linus2k/archive/2009/07/09/59956.htmlhttp://www.cnitblog.com/linus2k/comments/59956.htmlhttp://www.cnitblog.com/linus2k/archive/2009/07/09/59956.html#Feedback1http://www.cnitblog.com/linus2k/comments/commentRss/59956.htmlhttp://www.cnitblog.com/linus2k/services/trackbacks/59956.html
区别IE6与FF：
       background:orange;*background:blue;

区别IE6与IE7：
       background:green !important;background:blue;

区别IE7与FF：
       background:orange; *background:green;

区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;



君子常当当 2009-07-09 11:17 发表评论
]]>在IE和Firefox里面实现页面半透明-续http://www.cnitblog.com/linus2k/archive/2009/07/03/59803.html君子常当当君子常当当Fri, 03 Jul 2009 02:12:00 GMThttp://www.cnitblog.com/linus2k/archive/2009/07/03/59803.htmlhttp://www.cnitblog.com/linus2k/comments/59803.htmlhttp://www.cnitblog.com/linus2k/archive/2009/07/03/59803.html#Feedback0http://www.cnitblog.com/linus2k/comments/commentRss/59803.htmlhttp://www.cnitblog.com/linus2k/services/trackbacks/59803.html{-moz-opacity:0.6;filter:alpha(opacity=60);}
测试后只兼容firefox和IE，在Safari 里就不透明了，于是网上找了之后又加了这个代码
{opacity: 0.6;}才兼容的所有的浏览器！
备注：-moz-opacity:0.6在firefox3.5里面已经不被支持了。

君子常当当 2009-07-03 10:12 发表评论
]]>Javascript类MSN提示的页面效果http://www.cnitblog.com/linus2k/archive/2008/05/14/43696.html君子常当当君子常当当Wed, 14 May 2008 03:27:00 GMThttp://www.cnitblog.com/linus2k/archive/2008/05/14/43696.htmlhttp://www.cnitblog.com/linus2k/comments/43696.htmlhttp://www.cnitblog.com/linus2k/archive/2008/05/14/43696.html#Feedback0http://www.cnitblog.com/linus2k/comments/commentRss/43696.htmlhttp://www.cnitblog.com/linus2k/services/trackbacks/43696.html  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4 <title>类MSN提示的页面效果</title>
  5 <script language="JavaScript">
  6 //加载页面时，即刻获取短消息
  7 window.onload = viewMsg;
  8 //根据窗体高度和宽度，改变短消息提示框的高度和宽度
  9 window.onresize = resizeDiv;
 10 //出现错误时，不做任何处理
 11 window.onerror = function(){}
 12 //关于位置的相关变量
 13 var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
 14 function viewMsg()
 15 {
 16    try
 17    {
 18      //div的x坐标
 19      divTop = parseInt(document.getElementById("divMsg").style.top,10);
 20      //div的y坐标
 21      divLeft = parseInt(document.getElementById("divMsg").style.left,10);
 22      //div的高度
 23      divHeight = parseInt(document.getElementById("divMsg").offsetHeight,10);
 24      //div的宽度
 25      divWidth = parseInt(document.getElementById("divMsg").offsetWidth,10);
 26      //窗体宽度
 27      docWidth = document.body.clientWidth;
 28      //窗体高度
 29      docHeight = document.body.clientHeight;
 30      //设置div的y坐标
 31      document.getElementById("divMsg").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;
 32      //设置div的x坐标
 33      document.getElementById("divMsg").style.left = parseInt(document. body. scrollLeft,10) + docWidth - divWidth;
 34      //设置div显示
 35      document.getElementById("divMsg").style.visibility="visible";
 36      //设置定时器
 37      objTimer = window.setInterval("moveDiv()",10);
 38    }
 39    catch(e){}
 40 }
 41 
 42 function resizeDiv()
 43 {
 44    i+=1;
 45    if (i>500) closeDiv();
 46    try
 47    {
 48      //设置div高度
 49      divHeight = parseInt(document.getElementById("divMsg").offsetHeight, 10);
 50      //设置div宽度
 51      divWidth = parseInt(document.getElementById("divMsg").offsetWidth,10);
 52      //获取窗体宽度
 53      docWidth = document.body.clientWidth;
 54      //设置窗体高度
 55      docHeight = document.body.clientHeight;
 56      //设置div的y坐标
 57      document.getElementById("divMsg").style.top = docHeight - divHeight + parseInt (document.body.scrollTop,10);
 58      //设置div的x坐标
 59      document.getElementById("divMsg").style.left = docWidth - divWidth + parseInt (document.body.scrollLeft,10);
 60    }
 61    catch(e){}
 62 }
 63 
 64 function moveDiv()
 65 {
 66    try
 67    {
 68      if (parseInt(document.getElementById("divMsg").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
 69      {
 70        window.clearInterval(objTimer);
 71        //调整div的位置和大小
 72        objTimer = window.setInterval("resizeDiv()",1);
 73      }
 74      //获取y坐标
 75      divTop = parseInt(document.getElementById("divMsg").style.top,10);
 76      //调整div的y坐标
 77      document.getElementById("divMsg").style.top = divTop - 1;
 78    }
 79    catch(e){}
 80 }
 81 
 82 function closeDiv()
 83 {
       //将短信息提示层隐藏
 84    document.getElementById('divMsg').style.visibility='hidden';
 85    //清除定时器
 86    if(objTimer) window.clearInterval(objTimer);
 87 }
 88 </script>
 89 </head>
 90 
 91 <body scroll="no">
 92 <DIV id=divMsg style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND -COLOR: #c9d3f3">
 93    <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
 94      <TBODY>
 95          <TR>
 96              <TD style="FONT-SIZE: 12px;COLOR: #0f2c8c" width=30 height=24></TD>
 97              <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px;COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示：</TD>
 98              <TD style="PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size: 12px;font-weight: bold;margin-right:4px;" onclick=closeDiv() >×</span></TD>
 99          </TR>
100          <TR>
101              <TD style="PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px" colSpan=3 height=90>
102                  <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>条新消息<BR><BR>
103                     <DIV align=center style="word-break:break-all"><a href= "Javascript:alert('内容：好久不见，出来吃饭吧')"><font color=#FF0000>点击查看短信</font></a></DIV>
104                  </DIV>
105              </TD>
106          </TR>
107      </TBODY>
108    </TABLE>
109 </DIV>
110 </body>
111 </html> 记录一下，可能以后有用


君子常当当 2008-05-14 11:27 发表评论
]]>在IE和Firefox里面实现页面半透明http://www.cnitblog.com/linus2k/archive/2006/03/02/7081.html君子常当当君子常当当Thu, 02 Mar 2006 09:18:00 GMThttp://www.cnitblog.com/linus2k/archive/2006/03/02/7081.htmlhttp://www.cnitblog.com/linus2k/comments/7081.htmlhttp://www.cnitblog.com/linus2k/archive/2006/03/02/7081.html#Feedback2http://www.cnitblog.com/linus2k/comments/commentRss/7081.htmlhttp://www.cnitblog.com/linus2k/services/trackbacks/7081.html

今天看到的

今天用firefox看网页，突然看见一个页面竟然在firefox里面也可以透明，很奇怪，就下了那个页面的CSS观看，结果发现原来是使用了：
-moz-opacity: 0.9

说起来还真郁闷，我自己弄了实验，结果忽略了前面那个“-”小杠杠，让我折腾了近一个小时都在研究那个页面，因为那个页面还有很多JS文件。刚开始我以为是图片，保存了背景图片发现不是，后来以为是JS，结果也不是。呵呵。真是扰了一个大弯，以前都是用类似FILTER: alpha(opacity=90);这样的语句来实现的，但是只能在IE内核的浏览器有效果。

总结，要让页面在firefox和IE中都能透明，只要在CSS样式里面同时使用：

  1. FILTER: alpha(opacity=90);
  2. -moz-opacity: 0.9;


君子常当当 2006-03-02 17:18 发表评论
]]>