标签：right center bottom notifications tab animate div css
下载插件 简要教程这是一款基于animate.css的效果非常酷的CSS消息提示动画效果。这66种CSS消息提示动画效果按出现位置分为4种类型：上部、中部、中下和右下。每个部位的消息提示效果都是不一样的。
注意：这个CSS消息提示动画效果需要在支持CSS3的浏览器中才能正常工作。
HTML结构
该CSS消息提示动画效果的HTML结构非常简单。使用一个id为#notifications的div作为整个包裹容器。
<div id="notifications"></div>
|
消息提示框的代码默认情况下是不存在与DOM中的，它们使用js来动态插入。例如当选择"Top"选项时，在点击触发按钮后，Top消息提示框将使用js插入到DOM中：
<div id="notifications-top-center">
<span class="iconb" data-icon=""></span>
Oups something went wrong !
<div id="notifications-top-center-close" class="close">
<span class="iconb" data-icon=""></span>
</div>
</div>
|
对于中部、中下和右下几个部位的消息提示框也是相同的操作。它们默认是不存在与DOM中的，只有在触发了相应的事件时，才使用jQuery来将HTML代码插入到DOM中的相应位置上。
<div id="notifications-full">
<div id="notifications-full-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-icon"><span class="iconb" data-icon=""></span></div>
<div id="notifications-full-text">...</div>
</div>
<div id="notifications-bottom-center-tab">
<div id="notifications-bottom-center-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-center-tab-avatar"><img src="_assets/avatar.png" width="100" height="100" /></div>
<div id="notifications-bottom-center-tab-right">
<div id="notifications-bottom-center-tab-right-title"><span>delmarks</span> sent you a message</div>
<div id="notifications-bottom-center-tab-right-text">...</div>
</div>
</div>
<div id="notifications-bottom-right-tab">
<div id="notifications-bottom-right-tab-close" class="close"><span class="iconb" data-icon=""></span></div>
<div id="notifications-bottom-right-tab-avatar"><img src="_assets/avatar.png" width="70" height="70" /></div>
<div id="notifications-bottom-right-tab-right">
<div id="notifications-bottom-right-tab-right-title"><span>delmarks</span> sent you a message</div>
<div id="notifications-bottom-right-tab-right-text">...</div>
</div>
</div>
|
CSS样式
该CSS消息提示动画效果有两个主要的CSS文件。一个是animate.css文件，用于产生各种动画效果。另一个是animated-notifications.css文件。在实际使用时，你需要在animate.css文件中查找你需要的class动画名称。下面是主要的消息提示框定位CSS代码:
#notifications-bottom-right {
position: absolute;
width: 360px;
right: 20px;
bottom: 20px;
}
#notifications-bottom-right-tab{
background-color: rgba(255,255,255,1);
float: left;
height: 100px;
width: 360px;
margin-top: 20px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#notifications-bottom-right-tab-close{
height: 20px;
width: 20px;
position: absolute;
top: 40px;
right: 20px;
color: #cccccc;
font-size: 18px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-bottom-right-tab-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-bottom-right-tab-avatar{
float: left;
height: 100px;
width: 70px;
margin-left: 20px;
}
#notifications-bottom-right-tab-avatar img{
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-khtml-border-radius: 50% 50% 50% 50%;
float: left;
margin-top: 15px;
}
#notifications-bottom-right-tab-right{
float: left;
width: 210px;
margin-left: 20px;
margin-top: 20px;
}
#notifications-bottom-right-tab-right-title{
float: left;
width: 100%;
color: #252525;
font-weight: 600;
}
#notifications-bottom-right-tab-right-title span{
color: #e91e63;
}
#notifications-bottom-right-tab-right-text{
float: left;
width: 100%;
font-size: 14px;
color: #4c4c4c;
font-style: italic;
margin-top: 5px;
}
#notifications-bottom-center{
position: absolute;
width: 360px;
bottom: 90px;
left: 50%;
margin-left: -180px;
}
#notifications-bottom-center-tab{
background-color: rgba(255,255,255,1);
float: left;
height: 100px;
width: 360px;
margin-top: 20px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#notifications-bottom-center-tab-close{
height: 20px;
width: 20px;
position: absolute;
top: 40px;
right: 20px;
color: #cccccc;
font-size: 18px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-bottom-center-tab-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-bottom-center-tab-avatar{
float: left;
height: 100px;
width: 100px;
}
#notifications-bottom-center-tab-avatar img{
float: left;
}
#notifications-bottom-center-tab-right{
float: left;
width: 210px;
margin-left: 20px;
margin-top: 20px;
}
#notifications-bottom-center-tab-right-title{
float: left;
width: 100%;
color: #252525;
font-weight: 600;
}
#notifications-bottom-center-tab-right-title span{
color: #e91e63;
}
#notifications-bottom-center-tab-right-text{
float: left;
width: 100%;
font-size: 14px;
color: #4c4c4c;
font-style: italic;
margin-top: 5px;
}
#notifications-top-center {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background-color: rgba(255,255,255,1);
height: 50px;
text-align: center;
line-height: 50px;
color: #404040;
font-size: 18px;
font-weight: 600;
}
#notifications-top-center-close {
background-color: rgba(233,30,99,0.6);
float: right;
height: 50px;
width: 50px;
font-size: 30px;
color: rgba(255,255,255,1);
font-weight: 400;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-top-center-close:hover {
cursor: pointer;
background-color: rgba(233,30,99,1);
}
#notifications-full{
-moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
box-shadow: 0px 0px 50px rgba(0,0,0,0.1);
height: 300px;
width: 530px;
background-color: rgba(255,255,255,1);
position: fixed;
margin-top: 10%;
margin-left: -265px;
z-index: 2;
left: 50%;
top: 10%;
}
#notifications-full-close{
height: 20px;
width: 20px;
position: absolute;
top: 10px;
right: 10px;
color: #cccccc;
font-size: 20px;
line-height: 20px;
text-align: center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#notifications-full-close:hover {
color: rgba(102,102,102,1);
cursor: pointer;
}
#notifications-full-icon{
float: left;
width: 100%;
font-size: 65px;
text-align: center;
height: 65px;
margin-top: 35px;
color: #404040;
}
#notifications-full-text{
width: 430px;
float: left;
margin-left: 50px;
text-align: center;
margin-top: 40px;
font-size: 16px;
line-height: 24px;
color: #404040;
}
|
JAVASCRIPT
该CSS消息提示动画效果使用js代码使#notifications容器具有响应式效果，具体代码如下：
function resize(){
$('#notifications').height(window.innerHeight - 50);
}
$( window ).resize(function() {resize();});
resize();
|
每个消息提示框中都有一个关闭按钮，插件中使用一个函数来实现关闭功能：
function refresh_close(){
$('.close').click(function(){$(this).parent().fadeOut(200);});
}
refresh_close();
|
每个部位的消息提示框的HTML代码都是在JS文件中动态添加的。例如上部的HTML结构代码如下：
var top = '<div id="notifications-top-center"><span class="iconb" data-icon=""></span> Oups something went wrong !<div id="notifications-top-center-close" class="close"><span class="iconb" data-icon=""></span></div></div>';
|
最后是在选择了相应的动画效果后，点击提交按钮时将各种效果的消息提示框插入到DOM中。当#notifications-window-row-button按钮被点击时，插件会检测当前选择的位置和动画效果，然后移除旧的内容，在将新的内容添加到DOM中。在添加了新的内容之后，再使用refresh_close()函数来使消息提示框的关闭按钮可用。上部和中部的消息提示框是插入在#notifications中，而中下和右下部位的消息提示框是分别插入到#notifications-bottom-center和#notifications-bottom-right中，注意这点区别。
$('#notifications-window-row-button').click(function(){
if($('#position').val()=='top'){
$("#notifications-top-center").remove();
$("#notifications").append(top);
$("#notifications-top-center").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='center'){
$("#notifications-full").remove();
$("#notifications").append(center);
$("#notifications-full").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='bottom'){
$("#notifications-bottom-center").html();
$("#notifications-bottom-center").html(bottom);
$("#notifications-bottom-center-tab").addClass('animated ' + $('#effects').val());
refresh_close();
}
if($('#position').val()=='botom_right'){
$("#notifications-bottom-right").html();
$("#notifications-bottom-right").html(bottom_center);
$("#notifications-bottom-right-tab").addClass('animated ' + $('#effects').val());
refresh_close();
}
});
});
|
标签：right,center,bottom,notifications,tab,animate,div,css 来源： https://www.cnblogs.com/sunny-der/p/11763540.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。