浮动的公报――jQuery简单实现

        这是前一段时间维护考试系统碰到一个问题，就是浮动的考试公告。当时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>

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

6楼yingjiebohe16分钟前

好

5楼lishehe1小时前

顶顶，哈哈，加油

Re: lidaasky35分钟前

回复lishehen看似高深的功能，实现也很简单，呵呵

4楼lfmilaoshi1小时前

初学乍练。。。。米老师

3楼lmdcszh8小时前

顶！

2楼zhili_he_1985昨天 23:16

使用到的方法：noffset();// 得到第一个匹配的对象相对于文档的坐标位置，是一个包含有left和top的对象nhttp://api.jquery.com/offset/nnscroll(); // 当滚动页面时间触发的时候执行的函数nhttp://api.jquery.com/scroll/nnscrollTop(); // 得到滚动条的最高位置的垂直坐标nhttp://api.jquery.com/scrollTop/nnstop(); // 停止当前正在执行的动画效果nhttp://api.jquery.com/stop/nnanimate(); // 执行一个动态渐变动作nhttp://api.jquery.com/animate/

1楼liutengteng130昨天 21:32

、、、支持、、、