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

最新推荐文章于 2023-01-12 20:55:30 发布

iteye_3662

最新推荐文章于 2023-01-12 20:55:30 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 备忘录文章标签： xhtml ui javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_3662/article/details/82436601

javascript 同时被 2 个专栏收录

29 篇文章

订阅专栏

备忘录

10 篇文章

订阅专栏

本文介绍了一种实现访客列表滚动展示与管理的方法，包括使用CSS样式、HTML结构和jQuery脚本来创建一个可上下滚动的访客列表面板，支持用户通过点击顶部和底部的按钮来滚动列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>