欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js右下角彈出提示框示例代碼

 更新時間:2016年01月12日 08:40:19   作者:zhengzebiaodashi  
這篇文章主要介紹了js右下角彈出提示框示例代碼,即網(wǎng)頁右下角彈出廣告信息框?qū)嵗a,感興趣的小伙伴們可以參考一下

本文實例講解了網(wǎng)頁右下角彈出廣告信息框?qū)嵗a,分享給大家供大家參考,具體內(nèi)容如下

效果圖:

具體代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>網(wǎng)頁右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}
#winpop .title{
 width:100%;
 height:22px;
 line-height:20px;
 background:#FFCC00;
 font-weight:bold;
 text-align:center;
 font-size:12px;
}
#winpop .con{
 width:100%;
 height:90px;
 line-height:80px;
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
 text-decoration:underline;
 text-align:center
}
#silu{
 font-size:12px;
 color:#666;
 position:absolute;
 right:0;
 text-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 color:#FFF;
 cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);//將對象的高度轉(zhuǎn)化為數(shù)字
 if(popH==0){
 MsgPop.style.display="block";//顯示隱藏的窗口
 show=setInterval("changeH('up')",2);
 }
 else{ 
 hide=setInterval("changeH('down')",2);
 }
}
function changeH(str){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);
 if(str=="up"){
 if(popH<=100){
 MsgPop.style.height=(popH+4).toString()+"px";
 }
 else{ 
 clearInterval(show);
 }
 }
 if(str=="down"){ 
 if(popH>=4){ 
 MsgPop.style.height=(popH-4).toString()+"px";
 }
 else{ 
 clearInterval(hide); 
 MsgPop.style.display="none"; //隱藏DIV
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById('winpop').style.height='0px';
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<div id="silu">
 <button id="bt">3秒后會在右下角自動彈出窗口,如果沒有彈出請點(diǎn)擊這個按鈕</button>
</div>
<div id="winpop">
 <div class="title">您有新的短消息!<span class="close" id="close">X</span></div>
 <div class="con">1條未讀信息(</div>
</div>
</body>
</html>

以上代碼實現(xiàn)了我們需要的功能,下面簡單介紹一下實現(xiàn)過程。
實現(xiàn)原理:
原理非常的簡單,下面分步做一下簡單的介紹:
1.讓窗口居于網(wǎng)頁的右下角:
實現(xiàn)代碼如下:

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

以上代碼將windpop元素設(shè)置為絕對定位,尤其是將它的right和bottom屬性值設(shè)置為0,這樣就保證了它位于網(wǎng)頁的右下角,同時也將它的高度設(shè)置為0px,也就是說在默認(rèn)狀態(tài)下是隱藏的。
2.如何顯示和隱藏:
通過定時器函數(shù)setInterval()每隔指定時間調(diào)用一次changeH()函數(shù),此函數(shù)可以根據(jù)傳遞的值不斷的設(shè)置windpop的高度,這樣就實現(xiàn)了此窗口平滑出現(xiàn)和消失的效果。原理大體如上,這里就不多介紹了。

以上就是右下角彈出提示框的實現(xiàn)代碼,希望對大家的學(xué)習(xí)javascript程序設(shè)計有所幫助。

相關(guān)文章

  • 前端實現(xiàn)Word在線預(yù)覽功能詳解

    前端實現(xiàn)Word在線預(yù)覽功能詳解

    這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時會遇到需要給用戶創(chuàng)建word文檔并實現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下
    2023-09-09
  • 微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解

    微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解

    這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • javascript兼容性(實例講解)

    javascript兼容性(實例講解)

    下面小編就為大家?guī)硪黄猨avascript兼容性(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JS操作json對象key、value的常用方法分析

    JS操作json對象key、value的常用方法分析

    這篇文章主要介紹了JS操作json對象key、value的常用方法,結(jié)合實例形式分析了js操作json對象鍵值對遍歷及增刪的相關(guān)操作技巧,需要的朋友可以參考下
    2019-10-10
  • js對數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼

    js對數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼

    對數(shù)組中的數(shù)字從小到大排序,很多時候需要用的多,需要的朋友可以參考下
    2012-09-09
  • 如何通過Proxy實現(xiàn)JSBridge模塊化封裝

    如何通過Proxy實現(xiàn)JSBridge模塊化封裝

    這篇文章主要介紹了如何通過Proxy實現(xiàn)JSBridge模塊化封裝,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10
  • BootStrap實現(xiàn)手機(jī)端輪播圖左右滑動事件

    BootStrap實現(xiàn)手機(jī)端輪播圖左右滑動事件

    用bootstrap做出的項目輪播圖在手機(jī)端不能滑動,為此找了好多插件、框架。但是都不能和bootstrap良好的結(jié)合。經(jīng)過一番折騰終于找到了解決方法,下面小編通過本文給大家簡單介紹下
    2016-10-10
  • 微信小程序頁面縮放式側(cè)滑效果的實現(xiàn)代碼

    微信小程序頁面縮放式側(cè)滑效果的實現(xiàn)代碼

    這篇文章主要介紹了微信小程序頁面縮放式側(cè)滑效果的實現(xiàn)代碼,實現(xiàn)原理就是通過點(diǎn)擊按鈕,往需要動畫的div中添加或移除擁有動畫效果的class。具體實例代碼大家跟隨小編一起通過本文學(xué)習(xí)吧
    2018-11-11
  • js獲取隱藏元素的寬高

    js獲取隱藏元素的寬高

    本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • JavaScript設(shè)計模式之享元模式實例詳解

    JavaScript設(shè)計模式之享元模式實例詳解

    這篇文章主要介紹了JavaScript設(shè)計模式之享元模式,結(jié)合實例形式較為詳細(xì)的分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下
    2019-01-01

最新評論