您的位置：首页 > Web前端 > JQuery

浮动的公告——jQuery简单实现

2012-07-03 20:14 211 查看
        这是前一段时间维护考试系统碰到一个问题，就是浮动的考试公告。当时JS和jQuery都还没学，依照原有功能，依葫芦画瓢最终实现，但是对其中的细节不甚了解，刚浅学完JavaScript，又接触jQuery，所以重新注释此功能。

界面：






head：

<title>浮动公告</title>
<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/ExatMan.css" rel="stylesheet" type="text/css" />
body：
<div id="examInfo" runat="server">
欢迎使用在线考试系统
<hr />
<asp:Label ID="lblStudentName" runat="server"></asp:Label>
<hr />
剩余时间：
<asp:TextBox ID="txtTime" runat="server" Enabled="False"></asp:TextBox>
<hr />
请同学认真阅读考试须知：
<br />
<asp:Label ID="lblExaminationInstruction" runat="server" ForeColor="Red"></asp:Label>
<br />
<hr />
</div>


JavaScript：

<script type="text/javascript">
$(function () {
//根据id选择器定义examInfo的jQuery对象
var $sidebar = $("#examInfo"),
$window = $(window),
//获取examInfo在当前窗口的相对偏移
offset = $sidebar.offset(),
//自定义，作为偏移量
topPadding = 15;
//绑定滚动事件
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
//判断当前位置，如果相对于滚动条顶部偏移大于对窗口的偏移量，调整外上边距
$sidebar.stop().animate({
//重新定位examInfo
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
//如果当前如果相对于滚动条顶部偏移小于对窗口的偏移量，外上边距为零
//自定义动画，指定的属性必须用骆驼形式
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>


运行结果：公告可以随着滚动条的移动动态定位到页面左上部分。

       
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 公告 textbox stylesheet server
相关文章推荐
新的分享
章节导航