到周末了，明天該總結(jié)一下了，感覺學到了些東西，又感覺沒學多少東西，具體明天再分析吧，先來看看今天要分析的問題。

這樣的圖片相比大家都很熟悉：

————————————

今天我們就來分析制作一下，先來介紹下這種彈出框的特點：

* 始終依附在頁面邊框上

* 不隨頁面的上升下降而改變位置

* 鼠標經(jīng)過時，會彈出詳細信息，離開時，恢復最初狀態(tài)

這樣我們就能大概想到幾個可能會用到的功能：postion的絕對定位；鼠標經(jīng)過離開的監(jiān)聽和方法；這些是肯定會用的，但是，除了這些還用到了哪些呢，究竟又是怎么是實現(xiàn)的呢？

1、實現(xiàn)全部顯示的界面狀態(tài)

先進行編寫html代碼

然后是css樣式編碼

來分析下這里的要點：a、postion：fixed這個固定位置很不錯；b、right：0px，這個的具體應用后面會詳細說，但是這里也很關(guān)鍵；3、#mainMsg的margin-left：-100px，這個地方也很重要，這樣我們來看下效果
 
哈哈 這是本年度最大的彈出框了吧，惡搞一下，我們繼續(xù)來說js實現(xiàn)彈出效果

2、將詳細部分隱藏，提示部分漏外面

這個比較簡單，修改起來，只需將shareLeft的right值改變一下即可，right=-300px，也就是div的寬度

3、js來實現(xiàn)彈出效果

這個定時器的效果我們不是第一次用了，在js實現(xiàn)打字機效果時，我們就曾經(jīng)應用過，這里我們只是改變了一下定時的對象而已

這段代碼里面最需要注意的幾點有：offsetWidth、.style.right等，這個暫不多說，會有專門一篇來介紹，這里先這樣用吧，知道意思就行。

這個等弄透了再來說，現(xiàn)在效果就達到了，你也來試試看吧。