javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實(shí)現(xiàn)代碼
更新時(shí)間:2014年05月21日 09:46:38 作者:
這篇文章主要介紹了javascript制作的網(wǎng)頁側(cè)邊彈出框思路及實(shí)現(xiàn)代碼,需要的朋友可以參考下
到周末了,明天該總結(jié)一下了,感覺學(xué)到了些東西,又感覺沒學(xué)多少東西,具體明天再分析吧,先來看看今天要分析的問題。
這樣的圖片相比大家都很熟悉:
————————————
今天我們就來分析制作一下,先來介紹下這種彈出框的特點(diǎn):
* 始終依附在頁面邊框上
* 不隨頁面的上升下降而改變位置
* 鼠標(biāo)經(jīng)過時(shí),會(huì)彈出詳細(xì)信息,離開時(shí),恢復(fù)最初狀態(tài)
這樣我們就能大概想到幾個(gè)可能會(huì)用到的功能:postion的絕對(duì)定位;鼠標(biāo)經(jīng)過離開的監(jiān)聽和方法;這些是肯定會(huì)用的,但是,除了這些還用到了哪些呢,究竟又是怎么是實(shí)現(xiàn)的呢?
1、實(shí)現(xiàn)全部顯示的界面狀態(tài)
先進(jìn)行編寫html代碼
<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樣式編碼
<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>
來分析下這里的要點(diǎn):a、postion:fixed這個(gè)固定位置很不錯(cuò);b、right:0px,這個(gè)的具體應(yīng)用后面會(huì)詳細(xì)說,但是這里也很關(guān)鍵;3、#mainMsg的margin-left:-100px,這個(gè)地方也很重要,這樣我們來看下效果
哈哈 這是本年度最大的彈出框了吧,惡搞一下,我們繼續(xù)來說js實(shí)現(xiàn)彈出效果
2、將詳細(xì)部分隱藏,提示部分漏外面
這個(gè)比較簡(jiǎn)單,修改起來,只需將shareLeft的right值改變一下即可,right=-300px,也就是div的寬度
3、js來實(shí)現(xiàn)彈出效果
這個(gè)定時(shí)器的效果我們不是第一次用了,在js實(shí)現(xiàn)打字機(jī)效果時(shí),我們就曾經(jīng)應(yīng)用過,這里我們只是改變了一下定時(shí)的對(duì)象而已
<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è)暫不多說,會(huì)有專門一篇來介紹,這里先這樣用吧,知道意思就行。
這個(gè)等弄透了再來說,現(xiàn)在效果就達(dá)到了,你也來試試看吧。
這樣的圖片相比大家都很熟悉:


今天我們就來分析制作一下,先來介紹下這種彈出框的特點(diǎn):
* 始終依附在頁面邊框上
* 不隨頁面的上升下降而改變位置
* 鼠標(biāo)經(jīng)過時(shí),會(huì)彈出詳細(xì)信息,離開時(shí),恢復(fù)最初狀態(tài)
這樣我們就能大概想到幾個(gè)可能會(huì)用到的功能:postion的絕對(duì)定位;鼠標(biāo)經(jīng)過離開的監(jiān)聽和方法;這些是肯定會(huì)用的,但是,除了這些還用到了哪些呢,究竟又是怎么是實(shí)現(xiàn)的呢?
1、實(shí)現(xiàn)全部顯示的界面狀態(tài)
先進(jìn)行編寫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>
來分析下這里的要點(diǎn):a、postion:fixed這個(gè)固定位置很不錯(cuò);b、right:0px,這個(gè)的具體應(yīng)用后面會(huì)詳細(xì)說,但是這里也很關(guān)鍵;3、#mainMsg的margin-left:-100px,這個(gè)地方也很重要,這樣我們來看下效果

哈哈 這是本年度最大的彈出框了吧,惡搞一下,我們繼續(xù)來說js實(shí)現(xiàn)彈出效果
2、將詳細(xì)部分隱藏,提示部分漏外面
這個(gè)比較簡(jiǎn)單,修改起來,只需將shareLeft的right值改變一下即可,right=-300px,也就是div的寬度
3、js來實(shí)現(xiàn)彈出效果
這個(gè)定時(shí)器的效果我們不是第一次用了,在js實(shí)現(xiàn)打字機(jī)效果時(shí),我們就曾經(jīng)應(yīng)用過,這里我們只是改變了一下定時(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è)暫不多說,會(huì)有專門一篇來介紹,這里先這樣用吧,知道意思就行。
這個(gè)等弄透了再來說,現(xiàn)在效果就達(dá)到了,你也來試試看吧。
相關(guān)文章
js定時(shí)器出現(xiàn)第一次延遲的原因及解決方法
在本篇文章里小編給大家整理的是一篇關(guān)于js定時(shí)器出現(xiàn)第一次延遲的原因及解決方法,對(duì)此有需要的朋友們可以學(xué)習(xí)下。2021-01-01Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容
這篇文章主要介紹了Bootstrap Table 雙擊、單擊行獲取該行內(nèi)容及獲取全表的內(nèi)容,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08多種方法實(shí)現(xiàn)load加載完成后把圖片一次性顯示出來
如何一個(gè)load 加載完成后把圖片一次性顯示出來,下面有個(gè)不錯(cuò)的方法,希望對(duì)大家有所幫助2014-02-02Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼
這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼,需要的朋友可以參考下2018-12-12js獲取鼠標(biāo)點(diǎn)擊的位置實(shí)現(xiàn)思路及代碼
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置,但僅使用這個(gè)方法是不夠的,感興趣的朋友可以了解本文2014-05-05JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10js原生實(shí)現(xiàn)FastClick事件的實(shí)例
下面小編就為大家?guī)硪黄猨s原生實(shí)現(xiàn)FastClick事件的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11