JQuery优化的右下角消息框设计
2011-05-14
右下角弹窗在互联网上使用得非常普遍,虽然这种方式会很大地影响到用户体验,但是领导有这个要求,我们还是得做。下面是介绍一个刚写的弹窗例子,做得还算凑合吧。scroll : 滚动时候保持在页面右侧底部,resize: 浏览器变化时候保持在页面右侧底部。
效果演示
如右下角效果所示。
Jquery Code:
<script type="text/javascript"> $(function(){ $(window).load(function(){ $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); $("div[id=newnotice]").slideDown("slow"); }).scroll(function(){ $("div[id=newnotice]").css({"bottom":"0px"}); $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); }).resize(function(){ $("div[id=newnotice]").css({"bottom":""}); $("div[id=newnotice]").css({"right":"0px","bottom":"1px"}); }); $("label[id=tomin]").click(function(){ $("div[id=noticecon]","div[id=newnotice]").slideUp(); }); $("label[id=tomax]").click(function(){ $("div[id=noticecon]","div[id=newnotice]").slideDown(); }); $("label[id=toclose]").click(function(){ $("div[id=newnotice]").hide(); }); /** $.get("http://www.nowamagic.net/cgi/test.xml", function(data){ $(data).find('channel').find('item').each(function(index, ele){ var titles = $(ele).find('title').text(); var links = $(ele).find('link').text(); $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); }) }); **/ }); </script>
HTML Code:
<div id="newnotice"> <p> <span class="title">最热新闻</span> <span id="bts"> <label class="button" id="tomin" title="最小化">_</label> <label class="button" id="tomax" title="最大化">口</label> <label class="button" id="toclose" title="关闭">×</label> </span> </p> <div id="noticecon"> <ol> </ol> </div> </div>