自己实现一些JQuery插件-----------------------------------(三)

在网页中为了弹出广告或是提示信息，会在右下角实现弹出层

展示页面

index.html

<!DOCTYPE　HTML>
<html>
<head>
    <title>右下角弹出</title>
</head>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="main.js"></script>
<style type="text/css">

</style>

<script type="text/javascript">
function showMessager (arg) {
    $("#Messager").showDiv(arg);
    var bottomHeight =  "-"+document.documentElement.scrollTop;
    var bottomWidth = document.body.scrollWidth*0.84;

    $("#Messager").css("bottom", bottomHeight + "px");
    $("#Messager").css("left", bottomWidth + "px");
}
function closeMessager (arg) {
    $("#Messager").hideDiv(arg);
}
</script>
<body>
<br><br><br>
<input type="button" class="button" onclick="showMessager('sideUp')" value="下方滑出">
<input type="button" class="button" onclick="showMessager('fadeIn')" value="淡出">

<div id="Messager" class="white_content">
<div class="message_title">
    Messager
<div style="text-align: right; height:20px;float:right;">
<a style="font-size: 16px;cursor: pointer; " onclick="closeMessager('sideDown')">关闭</a>
</div>
</div>
白强教你如何制作一个弹出层，天天开心快乐！！
</div>
</body>
</html>

 

index.css

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 1px rhba(255,255,255, .22);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
    cursor: pointer;
}
.white_content {
display: none;
position: absolute;
float: right;
margin-bottom: 1px;
left: 85%;
width: 15%;
height: 10%;
border: 1px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.message_title{
height: 20px;
border: 1px solid lightblue;
background-color: lightblue;
z-index:1002;
overflow: auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4); 
}

main.js

 

$.fn.showDiv = function(arg){  
    switch(arg){
        case 'sideUp':
        this.animate({ height:'show'},'slow');
        break;
        case 'fadeIn':
        this.animate({ opacity: 'show' },'slow');
        break;
    }
      
};
$.fn.hideDiv = function(arg){  
    switch(arg){
        case 'sideDown':
        this.animate({ height:'hide'},'slow');
        break;
        case 'fadeOut':
        this.animate({ opacity: 'hide' },'slow');
        break;
    }
      
};

 

posted @ 2013-11-14 10:16  强子~Developer  阅读(133)  评论(0)  编辑  收藏  举报