Web聊天在线人员列表上下滚动

Blackbaby

浏览: 185013 次
性别:
来自: 成都

最近访客更多访客>>

491642555

xx5333

xyc1985414

simon518

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
备忘录

<!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> New Document </title>
		

<style type="text/css">
*{padding:0px;margin:0px; cursor:default;}
html,body{font:12px/22px "Microsoft YaHei",SimSun,"Segoe UI",Arial,Verdana,Sans-Serif;; background:#5d5370 url(../images/background.png) no-repeat center center; height:100%;}
a{text-decoration:none; cursor:pointer;}
a img{cursor:pointer;}
a:hover{text-decoration:none;}
img{ border:0; margin:0; padding:0; }
ul{ list-style:none;zoom:1;}
li {list-style:none outside none;zoom:1;}
.chatPanel{width:900px; height:600px; position:absolute; background:#f2f2f2; border-radius:5px;}
 .chatPanel .chatmain{ position:absolute; bottom:0; top:40px; width:100%;  }
.chatPanel .chatmain .mainleft{width:150px; background:#e0e0e0; position:absolute; top:0; left:0; bottom:0; border-radius:0 0 0 5px;}
.chatPanel .chatmain .mainright{width:260px; background:#f8f8f8; position:absolute; top:0; right:0; bottom:0; border-radius:0 0 5px 0;}
.chatPanel .chatmain .mainmidd{ margin-left:150px; margin-right:260px; height:100%; position:relative;}
/*mainleft*/
.oper-up{height:36px; background:#d5d5d5 url(../images/up.png) no-repeat center;cursor:pointer;}
.oper-down{height:36px; background:#d5d5d5 url(../images/down.png) no-repeat center; position:absolute;width:100%; left:0; bottom:0;  cursor:pointer;border-radius:0 0 0 5px;} 
.oper-up:hover,.oper-down:hover{ background-color:#cecece;}
.oper-layer{ position:absolute; left:0; width:100%; top:40px; bottom:40px; background:#e0e0e0; overflow:hidden;}
.oper-layer ul{}
.oper-layer ul li{ color:#666666; text-align:center; height:40px; line-height:40px; font-size:14px; cursor:pointer; }
.oper-layer ul li:hover{ background:#e2e2e2; }
.oper-layer ul li.selected{ background:#ededed; }
</style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
        (function ($) {
            $.fn.extend({
                Scroll: function (opt, callback) {
                    if (!opt) var opt = {};
                    var _btnUp = $("#" + opt.up); //Shawphy:向上按钮      
                    var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
                    var _this = this.eq(0).find("ul:first");
                    var lineH = _this.find("li:first").height(); //获取行高     
                    var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //每次滚动的行数，默认为一屏，即父容器高度
                    var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷动速度，数值越大，速度越慢（毫秒） 
                    var m = line;  //用于计算的变量
                    var count = _this.find("li").length; //总共的<li>元素的个数
                    var upHeight = line * lineH;
                    function scrollUp() {
                        if (!_this.is(":animated")) {  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                            if (m < count) {  //判断 m 是否小于总的个数
                                m += line;
                                _this.animate({ marginTop: "-=" + upHeight + "px" }, speed);
                            }
                        }
                    }
                    function scrollDown() {
                        if (!_this.is(":animated")) {
                            if (m > line) { //判断m 是否大于一屏个数
                                m -= line;
                                _this.animate({ marginTop: "+=" + upHeight + "px" }, speed);
                            }
                        }
                    }
                    _btnUp.bind("click", scrollUp);
                    _btnDown.bind("click", scrollDown);
                }
            });
        })(jQuery);
      $(function () {
            $("#oper-layer").Scroll({ line: 10, speed: 500,up: "oper-up", down: "oper-down" });
        }); 
   </script></head>
<body>
<div class="chatPanel">
<div class="chatmain">
    	<div class="mainleft">
        	<div id="oper-up" class="oper-up">oper-up</div>
            <div id="oper-layer" class="oper-layer">
            	<ul id="chatList">
                	<li id="item-1">访客1</li>
                    <li id="item-2">访客2</li>
                    <li id="item-3">访客3</li>
                    <li id="item-4" class="selected">访客4</li>
                    <li id="item-5">访客5</li>
                    <li id="item-6">访客6</li>
                    <li id="item-7">访客7</li>
                    <li id="item-8">访客8</li>
                    <li id="item-9">访客9</li>
                    <li id="item-10">访客10</li>
                    <li id="item-11">访客11</li>
                    <li id="item-12">访客12</li>
                    <li id="item-13">访客13</li>
                    <li id="item-14">访客14</li>
                    <li id="item-15">访客15</li>
                    <li id="item-16">访客16</li>
                    <li id="item-17">访客17</li>
                    <li id="item-18">访客18</li>
                    <li id="item-19">访客19</li>
                    <li id="item-20">访客20</li>
                    <li id="item-21">访客21</li>
                    <li id="item-22">访客22</li>
                    <li id="item-23">访客23</li>
                    <li id="item-24">访客24</li>
                    <li id="item-25">访客25</li>
                    <li id="item-26">访客26</li>
                    <li id="item-27">访客27</li>
                    <li id="item-28">访客28</li>
                    <li id="item-29">访客29</li>
                    <li id="item-30">访客30</li>
                    <li id="item-31">访客31</li>
                    <li id="item-32">访客32</li>
                    <li id="item-33">访客33</li>
                </ul>
            </div>
        	<div id="oper-down" class="oper-down">oper-down</div>
        </div>
		</div>
</body>
</html>

查看图片附件

分享到：

CronExpression 表达式 | 网络备忘

2012-10-22 10:21
浏览 915
评论(0)
分类:Web前端
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web聊天在线人员列表上下滚动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web聊天在线人员列表 上下滚动

评论

发表评论

相关推荐

eclipse使用小贴

JavaScript 计算当前日期是本年度及本月度第几周

Ajax Style File Uploading using Hidden iFrame

[Seajs模块化] HelloWorld学习

Chrom 任务栏通知

domReady Function

Web聊天左右显示(整理自jing.fm)

iframe高度适应

javascript的top，parent，opener,iframe

JavaScript:How new works

JavaScript:The Class of an Object

javascript自定义事件

javascript自定义事件管理

javascript图片预加载

form中相同name的checkbox提交问题

HTML页面底部定位

javascript数组扩展

WEB开发一些注意点

最短的IE判定

Cookie的工作原理和Cookie协议

最近访客更多访客>>

Web聊天在线人员列表上下滚动