常見的前端技術彙總

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 淘寶旺旺 點擊旺旺時候 就彈出某某旺旺對話框進行聊天 只要加個鏈接就可以了

<a href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%8B%BB%E8%8B%8F&site=cntaobao&s=1&charset=utf-8" target="_blank">在線旺旺</a> 這樣的  uid=%E8%8B%BB%E8%8B%8F uid後面的就是某個旺旺名稱 只要用encodeURI進行編碼轉換就可以了

8 新浪 微博分享代碼  <iframe src="http://v.t.sina.com.cn/widget/widget_topic_publish.php?tags=%E8%AF%9D%E9%A2%98%EF%BC%9A%E8%AF%B4%E5%87%BA%E4%BD%A0%E7%9A%84%E6%96%87%E5%85%B7%E6%9C%80%E7%88%B1%EF%BC%9F&skin=4&isShowPic=1&width=448&height=103&wordLength=&mblogNum=20" class="iframe2"></iframe>

其中tags後面的到&skin前面的 也是把話題經過編碼轉換後的 

9 淘寶微博插件線上轉換地址 http://t.taobao.com/topic/admin/topicWidgetAdmin.htm  不過這個要裝思科的×××才能打開!

10 新浪微博分享代碼:

<a href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent('【名師講堂】品質課程,精品講堂')+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()"></a>

淘江湖
    <a href="javascript:(function(){window.open('http://share.jianghu.taobao.com/share/addShare.htm?url='+encodeURIComponent(location.href),'_blank');})()"></a>

人人網
    <a href="javascript:(function(){window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名師講堂】品質課程,精品講堂'),'_blank');})()"></a>

豆瓣網
    <a href="javascript:(function(){window.open('http://shuo.douban.com/!service/share?p_w_picpath=&href='+encodeURIComponent(location.href),'_blank');})()"></a>

開心網
    <a href="javascript:(function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent('【名師講堂】品質課程,精品講堂')+'&rurl'+encodeURIComponent(location.href),'_blank');})()"></a>

QQ微博
 <a href="javascript:(function(){window.open('http://s.jiathis.com/?webid=tqq&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名師講堂】品質課程,精品講堂'),'_blank');})()"></a>

QQ空間
 <a href="javascript:(function(){window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(location.href),'_blank');})()"></a>

MSN
 <a href="javascript:(function(){window.open('http://mail.live.com/secure/start?action=compose&subject='+encodeURIComponent('【名師講堂】品質課程,精品講堂'))+'&body='+encodeURIComponent(location.href),'_blank');})()"></a>

谷歌buzz
 <a href="javascript:(function(){window.open('http://www.google.com/buzz/post?hl=zh-CN&url='+encodeURIComponent(location.href),'_blank');})()"></a>

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

 

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

12 如何做網頁中加入天氣預報:

 

<iframe src="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"></iframe>

效果如下:

 

如果想要換成其他的城市 那麼只要改下"101210101"這個數字即可 那麼具體不同的城市對應的數字可以通過http://ah.weather.com.cn/?裏的點擊查詢,則地址欄中的URL:http://www.weather.com.cn/weather/101011000.shtml裏的數字即是。

13 騰訊QQ  點擊qq按鈕後 直接可以和淘寶旺旺一樣 進行聊天 只需要這樣加代碼即可:

<a href="tencent://message/?uin=807287699&Site=www.xnzjpc.com.cn&Menu=yes" title="點擊給他發QQ消息">有事您Q我</a>  其中uin是qq號 當然你可以改成自己想要的QQ號!

14 給某人發郵件 :

<a href="mailto:[email protected]" target="_parent" title="給我發郵件吧">Email <span> 
                       [email protected]</span> </a> 

15  請編寫一個javascript函數 parseQueryString,它的用途是把url解析爲一個對象,如url="http://www.baidu.com/index.php?key0=0&key1=1&key2=2";

 

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

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

background-color:#000; opacity:0.5;filter:alpha(opacity=50); 前端學習培訓、視頻教程、學習路線,添加威信 kaixin666haoyun


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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章