`
Blackbaby
  • 浏览: 183813 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

 
阅读更多

 

<!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>
  • 大小: 27.6 KB
分享到:
评论
发表评论

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

相关推荐

    Vue列表如何实现滚动到指定位置样式改变效果

    在使用Vue.js框架开发Web应用时,经常需要实现列表滚动到指定位置并改变对应列表项样式的功能,特别是在聊天、通讯录、文档目录等场景下。本文将详细介绍如何在Vue项目中实现滚动到指定位置并改变样式的效果。 首先...

    Android聊天源码含表情,功能完美

    - 实现聊天界面的上下滚动自动加载历史消息功能,可以采用`EndlessRecyclerViewScrollListener`监听器。 - 聊天气泡(BubbleView)设计,使用自定义`BubbleDrawable`实现不同方向的气泡效果。 - 表情面板布局,可...

    滚动消息 跑马灯效果

    - **垂直及上下滚动**:除了水平的跑马灯,还可以实现垂直滚动效果。这可以通过改变元素的`transform: translateY()`值或者使用`scrollLeft`/`scrollTop`属性来实现。通过定时器控制动画的速率,可以实现消息的平滑...

    自编写小QQ聊天软件

    文件列表中的"小QQ_M_规范.exe"可能是小QQ的安装程序,用户可以通过运行这个文件来安装和体验这款聊天软件。安装过程中,程序会遵循一定的规范进行文件解压和配置,以便在用户的计算机上正确运行。 总的来说,小QQ...

    QQ在线咨询面版PHP版

    这个系统的一个独特特性是它可以跟随用户的滚动条上下移动,确保用户在浏览网页时始终保持可见,提供无缝的用户体验。 在PHP编程中,实现这种跟随滚动条的效果通常需要利用JavaScript或者jQuery库来处理浏览器端的...

    WebIM_Ajax框架

    12.新消息标题滚动字幕提醒; 13.新消息窗口闪烁+高亮提醒; 14.头像; 15.性别; 16.头像区分在线/离线(FF下有没有更好的解决方案?); 17.自定义头像; 18.表情; 19.右下角提示; 20.改为嵌入式WebIM; 21.主...

    QQ在线咨询代码,加载时间超快

    - **功能介绍**:此函数通过检测页面滚动位置的变化,实现了一个模拟心跳的效果,使得页面上的某个元素(这里是ID为“lovexin12”的元素)随着用户的滚动而上下移动。 - **具体实现**: - 获取当前页面的滚动位置。...

    Axure RP 源文件

    app下拉输入交互设计.rp banner轮播幻灯片 web三屏滑动+箭头上下翻页.rp 进度条.rp 九宫格.rp 母版的使用.rp 拼图2.rp 伸展部件2.rp 拖动头像及向上收起聊天对话框.rp 页面向上向下滑动效果.rp 音乐播放器.rp

    chatbot:用户互动聊天机器人

    Askimo是特定于这个领域的实例,它被设计成一个用户交互式的聊天机器人,类似于滚动维基百科,意味着它能够提供信息查询服务,特别是与百科全书式的内容相关。在这个场景中,我们可以深入探讨Chatbot的基本原理、...

    php ajax

    AJAX 常见的应用场景包括:搜索建议、实时聊天、表单验证、无限滚动等。 3. **PHP与AJAX结合**: 在Web开发中,PHP和AJAX经常协同工作。当用户在前端触发某个操作,如点击按钮或提交表单,JavaScript通过AJAX发送...

    浮动效果的导航

    这种设计模式通常用于网站的顶部导航、侧边栏菜单、在线聊天窗口或通知提示等,以增加用户体验和互动性。 在实现浮动导航时,主要涉及以下几个核心知识点: 1. CSS布局:浮动(Float)是CSS中一种早期的布局方式,...

    网页技术特效(javascript)

    这对于实现如实时聊天、无限滚动或动态加载内容等特效至关重要。 此外,JavaScript库和框架,如jQuery、React、Vue等,为开发者提供了更加便捷的API,简化了特效的实现。jQuery简化了DOM操作和事件处理,React和Vue...

    AjaxDemo

    **AjaxDemo**是一个示例项目,它展示了在Web开发中如何使用AJAX(Asynchronous JavaScript and XML)技术来实现异步数据交互和页面无刷新更新。这个项目可能包含了一系列使用AJAX的实例,用于演示如何在.NET、ASP...

    Paperly-crx插件

    “引文框”功能使读者可以以所见即所得的方式(即所见即所得)获取参考信息,而不是无效地上下滚动pdf。 请将任何问题报告给feedback@paperly.app或在https://paperly.app上与我们在线聊天。 Paperly扩展也是Paperly...

    AJ与API(两种方法).rar

    - 在移动应用或网页中,AJAX与API结合可以实现动态加载内容,如无限滚动、实时聊天或动态更新数据。 - 在自动化测试中,使用AJ和API可以模拟用户行为,测试后端服务的性能和稳定性。 总结来说,这个压缩包的资源...

    Telegram Chat Scroller-crx插件

    此扩展使您可以在Telegram Web上高速上下滚动。 当您尝试恢复消息历史记录并且需要在对话中加载所有消息时,这可能会很有用。 通常,您必须一直向上滚动,直到到达聊天开始为止。 使用此扩展程序,您只需单击一个...

    vc++ 应用源码包_1

    如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大到小和星星闪烁等滚动效果。实例使用了加载类似xml文件读取信息,然后显示。 COM_ATL_Tutorial 简单的atl控件演示 COM接口挂钩及其...

    vc++ 应用源码包_2

    如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大到小和星星闪烁等滚动效果。实例使用了加载类似xml文件读取信息,然后显示。 COM_ATL_Tutorial 简单的atl控件演示 COM接口挂钩及其...

    vc++ 应用源码包_6

    如题,此实例非常适合学习,重载并自绘了Wnd类,效果是上下文字、图片、文字由大到小和星星闪烁等滚动效果。实例使用了加载类似xml文件读取信息,然后显示。 COM_ATL_Tutorial 简单的atl控件演示 COM接口挂钩及其...

Global site tag (gtag.js) - Google Analytics