japanese19第一次,晚上偷偷看的www视频软件,av电影播放器

　時(shí)常在某些朋友的blog中看到一個(gè)可供聊天的對(duì)話(huà)框，它能讓正在瀏覽這個(gè)站點(diǎn)的用戶(hù)進(jìn)行聊天。不過(guò)在我看來(lái)，這個(gè)功能形同雞肋——誰(shuí)會(huì)知道哪些人正在瀏覽，又有哪些人可以聊天呢？不過(guò)今天在瀏覽LoveCherry的blog時(shí)發(fā)現(xiàn)在左側(cè)邊欄里出現(xiàn)了一個(gè)可供聊天的Live Messenger對(duì)話(huà)框，頓時(shí)讓我產(chǎn)生了興趣。不過(guò)知道這個(gè)東東的人似乎還不多，因此只能動(dòng)用搜索引擎了（在這里想再說(shuō)一句多余的話(huà)，因?yàn)槲視r(shí)常會(huì)收到一些類(lèi)似于“ASP.NET AJAX框架哪里可以下載”之類(lèi)的問(wèn)題，所以我建議那些朋友一定要養(yǎng)成先搜再問(wèn)的習(xí)慣）。那么我們就先來(lái)看看這個(gè)東西具體是什么樣的吧。

　　首先，我們可以訪問(wèn)這個(gè)頁(yè)面（http://settings.messenger.live.com/applications/CreateHtml.aspx），從中可以看出微軟提供了兩種方式供用戶(hù)使用Live Messenger的Web聊天功能。

提供一個(gè)鏈接（），點(diǎn)擊它則會(huì)彈出一個(gè)頁(yè)面可供聊天——于是別人就可以通過(guò)這個(gè)頁(yè)面與您聯(lián)系了。值得一提的是，圖標(biāo)也會(huì)根據(jù)用戶(hù)當(dāng)時(shí)的狀態(tài)不同而改變。
提供了一段代碼，在頁(yè)面上直接放入一塊較小的區(qū)域顯示聊天頁(yè)面。很顯然，這是一個(gè)iframe。
在進(jìn)行了簡(jiǎn)單的試驗(yàn)（使用Web Live Messenger和自己的Live Messenger聊天）之后，發(fā)現(xiàn)這個(gè)小玩意兒的功能還是比較可圈可點(diǎn)的。

可以選擇是否允許匿名用戶(hù)使用Web Live Messenger（http://settings.messenger.live.com/applications/WebSettings.aspx）。
性能很不錯(cuò)，基本上沒(méi)有明顯延遲，當(dāng)然這可能和用戶(hù)本身的網(wǎng)絡(luò)條件有關(guān)。
聊天的體驗(yàn)比想象中高很多，我們可以在Web Live Messenger的界面上發(fā)現(xiàn)“最近一條信息收于XXXX年X月X日 XX:XX:XX”以及“XXXX正在輸入消息”的字樣。此外，我們聊天中使用的特殊字體和表情符號(hào)也能正確顯示。
我嘗試通過(guò)Web Live Messenger找出對(duì)方的IM賬號(hào)，但似乎它對(duì)于這點(diǎn)有著很好的保護(hù)，這意味著如果用戶(hù)將Web Live Messenger放在blog上，可以避免因?yàn)樾孤禘mail地址而遭受垃圾郵件地攻擊。
試驗(yàn)了之后，我決定將其放在我的blog中，不過(guò)到底該怎么放呢？

Live Demo

　　現(xiàn)在訪問(wèn)LoveCherry的blog會(huì)發(fā)現(xiàn)他已經(jīng)將Web Live Messenger從邊欄撤下了。邊欄實(shí)在太窄，如果使用一個(gè)稍微長(zhǎng)一些的Nick就會(huì)被頂?shù)暮芨撸矣捎谝恍心茱@示的文字太少，用戶(hù)體驗(yàn)也很差。最后，我使用了“傳統(tǒng)”網(wǎng)頁(yè)內(nèi)嵌聊天對(duì)話(huà)框的做法。如果您現(xiàn)在正在瀏覽我的blog，就會(huì)發(fā)現(xiàn)頁(yè)面的右下角出現(xiàn)了一個(gè)矩形的Windows Live Messenger的圖片，點(diǎn)擊它則會(huì)顯示出一個(gè)300*400的Web Live Messenger聊天對(duì)話(huà)框。如果您覺(jué)得這個(gè)對(duì)話(huà)框擋著頁(yè)面上的內(nèi)容了，就可以點(diǎn)擊對(duì)話(huà)框左上角的關(guān)閉按鈕，這樣頁(yè)面上又只剩下了右下角的矩形圖片了。同時(shí)，我選擇了淡入淡出的效果來(lái)顯示/隱藏Web Live Messenger聊天對(duì)話(huà)框。這么做的目的只有一個(gè)，那就是讓用戶(hù)體驗(yàn)更酷一些。:)

　　現(xiàn)在大家可以試驗(yàn)一下Web Live Messenger的聊天功能了。不過(guò)請(qǐng)大家能夠訪問(wèn)http://settings.messenger.live.com/applications/CreateHtml.aspx，在頁(yè)面中和自己的Live Messenger進(jìn)行聊天。如果您直接在我的blog上測(cè)試Web Live Messenger，我實(shí)在會(huì)忙不過(guò)來(lái)。:(

實(shí)現(xiàn)

　　實(shí)現(xiàn)并不復(fù)雜，我總共用了大約2個(gè)小時(shí)，其中還包括學(xué)習(xí)了一些jQuery的功能所花的時(shí)間。唉，沒(méi)想到我居然到現(xiàn)在才第一次使用這個(gè)如此了得的JavaScript框架。不得不說(shuō)，如果您正在尋找一款方便您開(kāi)發(fā)前端應(yīng)用程序的JavaScript框架，并且希望它足夠的小，那么jQuery很可能就是您需要的。與它強(qiáng)大的功能不相稱(chēng)的是迷你的體積。一個(gè)經(jīng)過(guò)混淆，還沒(méi)有Gzip壓縮的jQuery腳本文件才26K大小，但是它帶給你的便利可以幫您節(jié)省大量的工作。

　　那么我們現(xiàn)在就開(kāi)始吧，首先，我們需要讓W(xué)eb Live Messenger的聊天對(duì)話(huà)框能夠永遠(yuǎn)顯示在頁(yè)面的可視范圍之內(nèi)。要實(shí)現(xiàn)這個(gè)功能，關(guān)鍵還是在于對(duì)頁(yè)面中元素尺寸的計(jì)算。請(qǐng)看如下代碼：

以上getClientBounds方法通過(guò)判斷瀏覽器類(lèi)型來(lái)得到頁(yè)面顯示區(qū)域的精確尺寸，而resetLiveMessengerPosition方法根據(jù)liveMessengerContainer元素的尺寸重設(shè)該容器在瀏覽器中的位置。這兩個(gè)方法談不上“技術(shù)”，而更像是一種“經(jīng)驗(yàn)”，它們都是我屬于所收藏的JavaScript代碼，如果大家需要的話(huà)也可以保留，或者需要時(shí)再來(lái)我的blog查找（其實(shí)我以前也有文章用到過(guò)這些方法）。需要注意的是，如果您使用了的是IE瀏覽器，在某些的頁(yè)面上可能會(huì)需要通過(guò)document.documentElement.clientWidth來(lái)獲得代碼（clientHeight也一樣），具體原因我正在調(diào)查，大家在使用時(shí)也請(qǐng)注意這點(diǎn)。

　　哎？那么resetLiveMessengerPosition方法該在什么時(shí)候調(diào)用呢？先不著急，我們?cè)賮?lái)實(shí)現(xiàn)Web Live Messenger的顯示/隱藏，以及淡入淡出效果——為什么放在一起實(shí)現(xiàn)了？因?yàn)槲覀冇玫搅薺Query框架。請(qǐng)看如下代碼：

<div id="liveMessengerContainer" style="position:absolute;">
    <div style="border: solid 1px black; width:160;
         height: 39px; cursor:pointer;
         background-image:url(Messenger_Header_bg.gif)"
         id="liveMessengerThumb">
        <img src="Messenger_logo_beta.gif"
             alt="使用Live Messenger聯(lián)系我"
             style="margin: 10px 10px 0px 9px;"/>
    </div>
    <table border="0" cellpadding="0" cellspacing="0"
           id="liveMessengerPanel">
        <tr>
            <td valign="top">
                <img id="hideLiveMessengerPanel"
                     style="cursor:pointer; margin-right: 3px;"
                     src="Messenger_close_sm.gif" alt="關(guān)閉" />
            </td>
            <td>
                <iframe
                    src="..." width="300" frameborder="0"
                    style="border: solid 1px black; width: 300px;
                    height: 400px;"></iframe>
            </td>
        </tr>
    </table>
<div>

<script language="javascript" type="text/javascript">
    $("#liveMessengerPanel").hide();

    $(document).ready(function(){
        $(window).scroll(resetLiveMessengerPosition);
        $(window).resize(resetLiveMessengerPosition);

        resetLiveMessengerPosition();

        $("#liveMessengerThumb").click(function(){
            $("#liveMessengerThumb").fadeOut(500, function(){
                $("#liveMessengerPanel").fadeIn(500, function(){
                    resetLiveMessengerPosition();
                });
                resetLiveMessengerPosition();
            });
        });

        $("#hideLiveMessengerPanel").click(function(){
            $("#liveMessengerPanel").fadeOut(500, function(){
                $("#liveMessengerThumb").fadeIn(500, function(){
                    resetLiveMessengerPosition();
                });
                resetLiveMessengerPosition();
            });
        });
    });
<script>

liveMessengerContainer容器中的內(nèi)容我就不進(jìn)行太多解釋了。同樣略過(guò)的還有jQuery的基本使用，不過(guò)相信有一定JavaScript基礎(chǔ)的朋友也能比較輕松地看懂。以上JavaScript代碼的第一句隱藏了聊天對(duì)話(huà)框，接著在jQuery中經(jīng)典的$(document).ready事件中對(duì)以有的元素進(jìn)行操作。首先，我們要求在用戶(hù)移動(dòng)了滾動(dòng)條（scroll），或者改變了瀏覽器大小（resize）時(shí)重新設(shè)置容器的位置。需要注意的是，我們接著需要顯式調(diào)用resetLiveMessengerPosition方法來(lái)對(duì)容器的位置進(jìn)行初始化。然后jQuery開(kāi)始展現(xiàn)了它的神奇之處，短短幾行代碼即完成了淡入淡出的切換功能，讓人嘆為觀止。

至此，在頁(yè)面中嵌入一個(gè)Web Live Messenger的工作就完成了。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕