快捷導(dǎo)航

javascript制作的網(wǎng)頁(yè)側(cè)邊彈出框思路及實(shí)現(xiàn)代碼

更新時(shí)間：2014年05月21日 09:46:38 作者：

這篇文章主要介紹了javascript制作的網(wǎng)頁(yè)側(cè)邊彈出框思路及實(shí)現(xiàn)代碼,需要的朋友可以參考下

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

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

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

今天我們就來(lái)分析制作一下，先來(lái)介紹下這種彈出框的特點(diǎn)：

* 始終依附在頁(yè)面邊框上

* 不隨頁(yè)面的上升下降而改變位置

* 鼠標(biāo)經(jīng)過(guò)時(shí)，會(huì)彈出詳細(xì)信息，離開(kāi)時(shí)，恢復(fù)最初狀態(tài)

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

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

先進(jìn)行編寫(xiě)html代碼

復(fù)制代碼代碼如下:

 
<span style="font-size:12px;"> <div id="shareLeft" class="shareLeft"> 
<div class="list"> 
<p><a href="#" title="提示">提示</a></p> 
</div> 
<p class="msg" id="mainMsg" onmouseover="showTip()"> 
分享到 
</p> 
</div></span> 

然后是css樣式編碼

復(fù)制代碼代碼如下:

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

來(lái)分析下這里的要點(diǎn)：a、postion：fixed這個(gè)固定位置很不錯(cuò)；b、right：0px，這個(gè)的具體應(yīng)用后面會(huì)詳細(xì)說(shuō)，但是這里也很關(guān)鍵；3、#mainMsg的margin-left：-100px，這個(gè)地方也很重要，這樣我們來(lái)看下效果

哈哈這是本年度最大的彈出框了吧，惡搞一下，我們繼續(xù)來(lái)說(shuō)js實(shí)現(xiàn)彈出效果

2、將詳細(xì)部分隱藏，提示部分漏外面

這個(gè)比較簡(jiǎn)單，修改起來(lái)，只需將shareLeft的right值改變一下即可，right=-300px，也就是div的寬度

3、js來(lái)實(shí)現(xiàn)彈出效果

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

復(fù)制代碼代碼如下:

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

這段代碼里面最需要注意的幾點(diǎn)有：offsetWidth、.style.right等，這個(gè)暫不多說(shuō)，會(huì)有專(zhuān)門(mén)一篇來(lái)介紹，這里先這樣用吧，知道意思就行。

這個(gè)等弄透了再來(lái)說(shuō)，現(xiàn)在效果就達(dá)到了，你也來(lái)試試看吧。

您可能感興趣的文章: