以下是 jQuery停靠屏幕边缘消息通知框代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery停靠屏幕边缘消息通知框代码</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="sliderbar-container">
<div class="title"><i></i> 通知消息</div>
<div class="body">
无消息
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.sliderBar.js"></script>
<script type="text/javascript">
$(function(){
$('.sliderbar-container').sliderBar({
open : true, // 默认是否打开，true打开，false关闭
top : 200, // 距离顶部多高
width : 360, // body内容宽度
height : 240, // body内容高度
theme : 'green', // 主题颜色
position : 'left' // 显示位置，有left和right两种
});
});
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
