javascript制作的網頁側邊彈出框思路及實現代碼

2024-05-06 16:06:24

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript制作的網頁側邊彈出框思路及實現代碼,需要的朋友可以參考下

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

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

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

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

* 始終依附在頁面邊框上

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

* 鼠標經過時，會彈出詳細信息，離開時，恢復最初狀態

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

1、實現全部顯示的界面狀態

先進行編寫html代碼

復制代碼代碼如下:

哈哈這是本年度最大的彈出框了吧，惡搞一下，我們繼續來說js實現彈出效果

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

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

3、js來實現彈出效果

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

復制代碼代碼如下:

<span><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>