常见的前端技术汇总

1 fix问题：

我们都知道IE6下不支持position:fixed问题!但是我做浮动菜单固定某个位置时也是经常用这个属性去解决 但是考虑到一个问题就是IE6下不支持这个属性！那怎么办呢 在网上google了下 发现可以有一种方法可以解决上面的问题 就是用hack技术及表达式 我们都知道IE6下有很多bug没有修复 当然微软现在也不可能是修复IE6 所以网上很多高手研究了hack出来 当然hack也是一门技术 千万不要认为hack会怎么样会怎么样！！！当然能不用hack尽量不用！！！fix解决方案如下：

 

*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101))

其中代码中101指那个浮动菜单的高度！这样的话IE6虽然支持fix属性 但是当我们移动滚动条测试时候 还是会发现IE6，7会有抖动的bug 修复IE6 7抖动的方法如下：

 

html,html
body {background-p_w_picpath:url(about:blank);background-p_w_upload:fixed;}

以前我是用个很少的1px×1px透明图片去解决这个问题 但是发现用个空 图片放哪里也可以 现在到目前为止 bug就没有啊 兼容IE 火狐 谷歌等等游览器！！！

2 实现半透明问题 只需要在css中加入一句代码就ok了

 

background-color:#000; opacity:0.5;filter:alpha(opacity=50);

3 解决因透明flash覆盖到元素上面 在IE6 7 下 元素无法点击问题 只需要在元素上面加入如下代码 即可解决：

 

filter:alpha(opacity=0);*background-color:#000;
position:relative; z-index:1000;

4 解决浮动菜单随滚动条滚动在IE6下的hack

 

width:100%!important; width:auto; /*nav IE6下保持居中*/_position:absolute;_top:expression(eval(documentElement.scrollTop+130)); /*左右两侧*/
_position:absolute;bottom:0px;_top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-58)); overflow:hidden;left:0.1%;margin-left:10px;}/*位于底部*/

5 ul li的问题  正常情况下是这样的 不好意思 好像这里不能截个图放不进来 描述下吧 正常情况下就是每一行一行的 但是在IE6 7 下回偏斜点 所以解决的方法一定要用display:inline；这个属性就可以解决问题了！！！

 6 height问题 想要某个元素高度背景随内容的增加而增加时 千万不要设置height：100%；这样的话 会出现背景不会随的内容的增加而增加 在中间会脱节 一般情况下不设置height 但是当有的时候需要height：100%时候 为了解决上面背景会脱节问题 用下面的代码就可以解决啊！！

 

body,html{height:100%;}

 这样的话 最外层的高度就会随的body及文档的高度而变化！就可以解决上面的问题了！

7 淘宝旺旺 点击旺旺时候 就弹出某某旺旺对话框进行聊天 只要加个链接就可以了

在线旺旺 这样的  uid=%E8%8B%BB%E8%8B%8F uid后面的就是某个旺旺名称 只要用encodeURI进行编码转换就可以了

8 新浪 微博分享代码 

其中tags后面的到&skin前面的 也是把话题经过编码转换后的 

9 淘宝微博插件线上转换地址 http://t.taobao.com/topic/admin/topicWidgetAdmin.htm  不过这个要装思科的×××才能打开！

10 新浪微博分享代码：

淘江湖
    

人人网
    

豆瓣网
    

开心网
    

QQ微博
 

QQ空间
 

MSN
 

谷歌buzz
 

10  优酷网视频地址转换 ： 有时候需求方 给我们一个优库网 视频地址 但是那个视频地址有广告 不过需求方说 我不想要广告 那么我们这边转换的方法 可以先把 优酷网视频打开 点击"更多"按钮 然后先复制flash地址  比如说这个：

http://player.youku.com/player.php/sid/XMzMyNTQ2MjA4/v.swf  我们只需要这样转换下就ok了 http://player.youku.com/player.php/partnerid/XMTcxMg==/sid/XMzMyNTQ2MjA4/v.swf   把  partnerid/XMTcxMg==   加上

11.有时候我们要用锚点链接 但是有时候锚点链接不能用 我们可以用javascript 写个javascript就可以了

<map name="Map2" id="Map2">
          <area shape="rect" coords="16,60,148,104" href="javascript:"  onclick="map('#nav1')" target="_self"/>
          <area shape="rect" coords="15,107,147,151" href="javascript:"  onclick="map('#nav2')" target="_self"/>
        map>

  JS

 

"text/javascript">
    function map(url){
        var _url = document.location.href,
            surl = _url.split("#"),
            realUrl = surl[0] + url;
            location.href = realUrl;
    }

12 如何做网页中加入天气预报：

 

"http://m.weather.com.cn/m/pn12/weather.htm?id=101210101T" width="245"
height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no">

效果如下：

 

如果想要换成其他的城市 那么只要改下"101210101"这个数字即可 那么具体不同的城市对应的数字可以通过http://ah.weather.com.cn/?里的点击查询，则地址栏中的URL：http://www.weather.com.cn/weather/101011000.shtml里的数字即是。

13 腾讯QQ  点击qq按钮后 直接可以和淘宝旺旺一样 进行聊天 只需要这样加代码即可：

有事您Q我  其中uin是qq号 当然你可以改成自己想要的QQ号！

14 给某人发邮件 ：

Email  
                       [email protected]  

15  请编写一个javascript函数 parseQueryString,它的用途是把url解析为一个对象，如url="http://www.baidu.com/index.php?key0=0&key1=1&key2=2";

 

 </span></span></li>
    
    
    
    <li><span>            <span class="keyword">function</span><span> parseQueryString(url){ </span></span></li>
    
    
    
    <li class="alt"><span>                <span class="keyword">var</span><span> arr; </span></span></li>
    
    
    
    <li><span>                <span class="keyword">var</span><span> obj = {}; </span></span></li>
    
    
    
    <li class="alt"><span>                <span class="comment">//alert(url);</span><span> </span></span></li>
    
    
    
    <li><span>                <span class="keyword">if</span><span>((arr=url.indexOf(</span><span class="string">"?"</span><span>))!=-1){ </span></span></li>
    
    
    
    <li class="alt"><span>                    <span class="keyword">var</span><span> param = url.substring(arr+1,url.length-1); </span></span></li>
    
    
    
    <li><span>                    console.log(param)  <span class="comment">//key0=0&key1=1&key2=</span><span> </span></span></li>
    
    
    
    <li class="alt"><span>                    <span class="keyword">var</span><span> paramArr = param.split(</span><span class="string">"&"</span><span>); </span></span></li>
    
    
    
    <li><span>                    console.log(paramArr);<span class="comment">//["key=0",'key=1','key='];</span><span> </span></span></li>
    
    
    
    <li class="alt"><span>                    <span class="keyword">var</span><span> ret=[]; </span></span></li>
    
    
    
    <li><span>                    <span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=0;i<paramArr.length;i++){ </span></span></li>
    
    
    
    <li class="alt"><span>                        ret = paramArr[i].split(<span class="string">"="</span><span>); </span></span></li>
    
    
    
    <li><span>                        console.log(ret); </span></li>
    
    
    
    <li class="alt"><span>                        <span class="comment">//console.log(ret[1]);</span><span> </span></span></li>
    
    
    
    <li><span>                        obj[ret[0]]=ret[1];  </span></li>
    
    
    
    <li class="alt"><span>                        console.log(obj[ret[0]]=ret[1]); </span></li>
    
    
    
    <li><span>                    }    </span></li>
    
    
    
    <li class="alt"><span>                } </span></li>
    
    
    
    <li><span>                <span class="keyword">return</span><span> obj; </span></span></li>
    
    
    
    <li class="alt"><span>            } </span></li>
    
    
    
    <li><span>            <span class="keyword">var</span><span> url = </span><span class="string">"http://www.taobao.com/index.php?key0=0&key1=1&key2=2"</span><span>; </span></span></li>
    
    
    
    <li class="alt"><span>            <span class="keyword">var</span><span> obj = parseQueryString(url); </span></span></li>
    
    
    
    <li><span>            console.log((obj.key0));<span class="comment">//0</span><span> </span></span></li>
    
    
    
    <li class="alt"><span>

16 IE8和IE9的hack  1. background-color:red\0;IE8和IE9都支持；

          2 . background-color:blue\9\0; 仅IE9支持；