到週末了，明天該總結一下了，感覺學到了些東西，又感覺沒學多少東西，具體明天再分析吧，先來看看今天要分析的問題。
這樣的圖片相比大家都很熟悉：
――――――――――――
今天我們就來分析製作一下，先來介紹下這種彈出框的特點：
* 始終依附在頁面邊框上
* 不隨頁面的上升下降而改變位置
* 鼠標經過時，會彈出詳細信息，離開時，恢復最初狀態
這樣我們就能大概想到幾個可能會用到的功能：postion的絕對定位；鼠標經過離開的監聽和方法；這些是肯定會用的，但是，除了這些還用到了哪些呢，究竟又是怎麼是實現的呢？
1、實現全部顯示的界面狀態
先進行編寫html代碼
複製代碼代碼如下:
<span style="font-size:12px;"> <div id="shareLeft">
<div>
<p><a href="#">提示</a></p>
</div>
<p id="mainMsg" onmouseover="showTip()">
分享到
</p>
</div></span>
然後是css樣式編碼
複製代碼代碼如下:
<span style="font-size:12px;">*{margin: 0;padding: 0;}
#shareLeft{position: fixed;background-color: yellow;top: 50px;width: 300px;height: 600px;right: 0px;}
#mainMsg{color: #fff;position: absolute;cursor: pointer;text-align: center;background-color: red;top: 60px;width: 100px;height:400px;padding: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; }
.list{float: right;background-color: #fff;width: 280px;height: 580px;margin: 10px 10px 10px 10px;}</span>
來分析下這裡的要點：a、postion：fixed這個固定位置很不錯；b、right：0px，這個的具體應用後面會詳細說，但是這裡也很關鍵；3、#mainMsg的margin-left：-100px，這個地方也很重要，這樣我們來看下效果
哈哈這是本年度最大的彈出框了吧，惡搞一下，我們繼續來說js實現彈出效果
2、將詳細部分隱藏，提示部分漏外面
這個比較簡單，修改起來，只需將shareLeft的right值改變一下即可，right=-300px，也就是div的寬度
3、js來實現彈出效果
這個定時器的效果我們不是第一次用了，在js實現打字機效果時，我們就曾經應用過，這裡我們只是改變了一下定時的對象而已
複製代碼代碼如下:
<span style="font-size:12px;"><script type="text/javascript">
var timer=null;
var count=0;
var tip=function(position,target,speed){
clearInterval(timer);
timer=setInterval(function(){
if(count>position.offsetWidth){
clearInterval(timer);
}else{
position.style.right+=window.count+"px";
window.count++;
};
}, speed);
};
function showTip(){
var position=document.getElementById("shareLeft");
tip(position,document.body.clientWidth,1000);
};
</script></span>
這段代碼裡面最需要注意的幾點有：offsetWidth、.style.right等，這個暫不多說，會有專門一篇來介紹，這裡先這樣用吧，知道意思就行。
這個等弄透了再來說，現在效果就達到了，你也來試試看吧。