javascript製作的網頁側邊彈出框--Day08
阿新 • • 發佈:2019-02-03
到週末了,明天該總結一下了,感覺學到了些東西,又感覺沒學多少東西,具體明天再分析吧,先來看看今天要分析的問題。
這樣的圖片相比大家都很熟悉:
——————————————————
今天我們就來分析製作一下,先來介紹下這種彈出框的特點:
*始終依附在頁面邊框上
*不隨頁面的上升下降而改變位置
*滑鼠經過時,會彈出詳細資訊,離開時,恢復最初狀態
這樣我們就能大概想到幾個可能會用到的功能:postion的絕對定位;滑鼠經過離開的監聽和方法;這些是肯定會用的,但是,除了這些還用到了哪些呢,究竟又是怎麼是實現的呢?
1、實現全部顯示的介面狀態
先進行編寫html程式碼
<div id="shareLeft" class="shareLeft">
<div class="list">
<p><a href="#" title="提示">提示</a></p>
</div>
<p class="msg" id="mainMsg" onmouseover="showTip()">
分享到
</p>
</div>
然後是css樣式編碼
*{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;}
來分析下這裡的要點:a、postion:fixed這個固定位置很不錯;b、right:0px,這個的具體應用後面會詳細說,但是這裡也很關鍵;3、#mainMsg的margin-left:-100px,這個地方也很重要,這樣我們來看下效果
哈哈 這是本年度最大的彈出框了吧,惡搞一下,我們繼續來說js實現彈出效果
2、將詳細部分隱藏,提示部分漏外面
這個比較簡單,修改起來,只需將shareLeft的right值改變一下即可,right=-300px,也就是div的寬度
3、js來實現彈出效果
這個定時器的效果我們不是第一次用了,在js實現打字機效果時,我們就曾經應用過,這裡我們只是改變了一下定時的物件而已
<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>
這段程式碼裡面最需要注意的幾點有:offsetWidth、.style.right等,這個暫不多說,會有專門一篇來介紹,這裡先這樣用吧,知道意思就行。
這個等弄透了再來說,現在效果就達到了,你也來試試看吧。
又晚了,睡覺覺啊...