利用jQuery实现网页顶部消息提示框插件



48 189 64



特效描述:利用jQuery实现 网页顶部消息 提示框插件,利用jQuery实现网页顶部消息提示框插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.xctips.css" />
<link rel="stylesheet" href="css/jquery.xctips.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.xctips.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.xctips.js"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
*{padding:0; margin:0}
div.v{width:200px; margin:0 auto; background:#060; color:#FFF; text-align:center; margin-top:10px; padding:10px; cursor:pointer}
</style>
</head>
<body style="padding-top:50px">
<div class="v" onclick="xcsoft.info('请填写你的相关信息哟',3000)">
提示消息[3秒后自动消失]
</div>
<div class="v" onclick="xcsoft.success('你的信息更新完毕',1500)">
成功消息[1.5秒后自动消失]
</div>
<div class="v" onclick="xcsoft.error('你还有信息未填写',2000)">
失败消息[2秒后自动消失]
</div>
<div class="v" onclick="xcsoft.loading('正在更新中,请等待...')">
加载消息[不会自动消失]
</div>
<div class="v" onclick="xcsoft._hide()">
强制隐藏消息
</div>
<script type="text/javascript">
//为 tips 提示框自定义 CSS,以下为默认
xcsoft.tipsCss = {
	height: '44px',
	fontSize: '16px'
};
//隐藏、显示速度 ,默认 fast
xcsoft.tipsHide=xcsoft.tipsShow=100;
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到