AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

类似marquee的滚动信息显示

2011-06-30 936
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：           滚动广告信息             #nli_con         {             height: 200px;         ...

 <!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=gb2312" />
    <title>滚动广告信息</title>
    <style type="text/css">
        #nli_con
        {
            height: 200px;
            width: 400px;
            overflow: hidden;
            border: 1px solid #999999;
        }
        div, dl, dt, dd
        {
            margin: 0px;
            padding: 0px;
        }
        dl
        {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #CCCCCC;
            font-size: 14px;
            margin-right: 10px;
            margin-left: 10px;
        }
        dd
        {
            font-size: 12px;
        }
    </style>
    <style type="text/css">
        #nli_con
        {
            height: 200px;
            width: 400px;
            overflow: hidden;
            border: 1px solid #999999;
        }
        div, dl, dt, dd
        {
            margin: 0px;
            padding: 0px;
        }
        dl
        {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #CCCCCC;
            font-size: 14px;
            margin-right: 10px;
            margin-left: 10px;
        }
        dd
        {
            font-size: 12px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function myMarquee(id, name, out, speed) {
            var $ = function (d) {
                typeof d == "string" && (d = document.getElementById(d));
                return $.fn.call(d);
            };
            $.fn = function () {
                //附加2个方法 
                this.$ADD = function (fn) { CLS.add(this, fn) };
                this.addEvent = function (sEventType, fnHandler) {
                    if (this.addEventListener) { this.addEventListener(sEventType, fnHandler, false); }
                    else if (this.attachEvent) { this.attachEvent("on" + sEventType, fnHandler); }
                    else { this["on" + sEventType] = fnHandler; }
                }
                this.removeEvent = function (sEventType, fnHandler) {
                    if (this.removeEventListener) { this.removeEventListener(sEventType, fnHandler, false); }
                    else if (this.detachEvent) { this.detachEvent("on" + sEventType, fnHandler); }
                    else { this["on" + sEventType] = null; }
                }
                return this;
            };
            var Class = { create: function () { return function () { this.initialize.apply(this, arguments); } } };
            var Bind = function (obj, fun, arr) { return function () { return fun.apply(obj, arr); } }
            var Marquee = Class.create();

            Marquee.prototype = {
                initialize: function (id, name, out, speed) {
                    this.name = name;
                    this.box = $(id);
                    this.out = out;
                    this.speed = speed;
                    this.d = 1;
                    this.box.style.position = "relative";
                    this.box.scrollTop = 0;
                    var _li = this.box.firstChild;
                    while (typeof (_li.tagName) == "undefined") _li_li = _li.nextSibling;
                    this.lis = this.box.getElementsByTagName(_li.tagName);
                    this.len = this.lis.length;
                    for (var i = 0; i < this.lis.length; i++) {
                        //计算该复制多少节点，保证无缝滚动，没必要的就不复制 
                        var __li = document.createElement(_li.tagName);
                        __li.innerHTML = this.lis[i].innerHTML;
                        this.box.appendChild(__li);
                        if (this.lis[i].offsetTop >= this.box.offsetHeight) break;
                    }
                    this.Start();
                    this.box.addEvent("mouseover", Bind(this, function () { clearTimeout(this.timeout); }, []));
                    this.box.addEvent("mouseout", Bind(this, this.Start, []));
                },
                Start: function () {
                    clearTimeout(this.timeout);
                    var me = this;
                    this.timeout = setTimeout(function () { me.Up() }, this.out * 1000)
                },
                Up: function () {
                    clearInterval(this.interval);
                    var me = this;
                    this.interval = setInterval(function () { me.Fun() }, 10);
                },
                Fun: function () {
                    this.box.scrollTop += this.speed;
                    if (this.lis[this.d].offsetTop <= this.box.scrollTop) {
                        clearInterval(this.interval);
                        this.box.scrollTop = this.lis[this.d].offsetTop;
                        this.Start();
                        this.d++;
                    }
                    if (this.d >= this.len + 1) {
                        this.d = 1;
                        this.box.scrollTop = 0;
                    }
                }
            };
            var m = new Marquee(id, name, out, speed);
        }
        window.onload = function () { myMarquee("nli_con", "marquee", 2, 2) } 
    </script>
</head>
<body>
    <div id="nli_con">
        <dl>
            <dt><a href="http://www.hwj123.com/" target='_blank'><strong>1. 域名与网址有什么区别？</strong></a></dt>
            <dd>
                一个完整网址范例如下： http://www.hwj123.com....</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/8.html" target='_blank'><strong>2. 什么是虚拟主机？
            </strong></a></dt>
            <dd>
                虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/45.html" target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt>
            <dd>
                中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果，本站整理了多年对中小企业服务的经验...</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/42.html" target='_blank'><strong>4. 为什么要建立网站标准？什么是网站标准？</strong></a></dt>
            <dd>
                我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/22.html" target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>
            <dd>
                企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"...</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/30.html" mce_href="http://www.hwj123.com/blog/post/30.html"
                target='_blank'><strong>6. 2009牛年，网站怎样发展好</strong></a></dt>
            <dd>
                第一，选择做网站内容， 制定网站内容，根据你的团队工作能力，工作量接受范围度等等，制定一个框架性的简单的方案。 最好能发挥自己的专长，如果你是三国里的张飞...</dd>
        </dl>
        <dl>
            <dt><a href="http://www.hwj123.com/blog/post/13.html" mce_href="http://www.hwj123.com/blog/post/13.html"
                target='_blank'><strong>7. Internet域名是什么??</strong></a></dt>
            <dd>
                Internet域名，是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有一个重复的域名。域名的形式是以若干个英文字母和数字组成，由...</dd>
        </dl>
    </div>
</body>
</html>

文章标签：
域名与网站
Web App开发
前端开发
暖枫无敌
目录
相关文章
2025「AI安全」全球攻防赛小编
|
6天前
|
云安全 人工智能 安全
阿里云欧阳欣 ：AI Agent时代下，云安全的双轮驱动战略
云安全的新趋势、新发布
2025「AI安全」全球攻防赛小编
1108 17
阿里云欧阳欣 ：AI Agent时代下，云安全的双轮驱动战略
数据库知识分享者小北
|
6天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布，快来 PolarDB 尝鲜！
PostgreSQL 18 发布，PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证，显著提升性能与安全。PolarDB-PG 18 支持存算分离架构，融合海量弹性存储与极致计算性能，搭配丰富插件生态，为企业提供高效、稳定、灵活的云数据库解决方案，助力企业数字化转型如虎添翼！
数据库知识分享者小北
790 19
南瓜佬
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes（K3s）的微服务：阿里云生产环境扩容实践
在微服务架构中，如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战，详解如何基于阿里云基础设施，利用 Docker 封装服务、K3s 实现容器编排，构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节，适配阿里云资源特性与服务生态，助力企业打造低成本、高可靠、易扩展的微服务解决方案。
南瓜佬
1327 7
varin
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二：Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧，结合学术分析 AI 应用的需求分析、设计方案，介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
varin
301 129
AI 超级智能体全栈项目阶段二：Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
计算机程序设计Y2013070224
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展，网络欺诈频发，构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术，设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统，提升公众防范意识，助力企业合规与用户权益保护。
计算机程序设计Y2013070224
229 127
modelscope
|
16天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源！同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
modelscope
1396 87
计算机程序设计Y2013070224
|
4天前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术，构建高效、可扩展的销售管理平台，实现客户、订单、数据可视化等全流程自动化管理，提升企业运营效率与决策能力。
计算机程序设计Y2013070224
220 128
varin
|
5天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一：AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式（SDK/HTTP/SpringAI/langchain4j）
本文介绍AI大模型的核心概念、分类及开发者学习路径，重点讲解如何选择与接入大模型。项目基于Spring Boot，使用阿里云灵积模型（Qwen-Plus），对比SDK、HTTP、Spring AI和LangChain4j四种接入方式，助力开发者高效构建AI应用。
varin
298 122
AI 超级智能体全栈项目阶段一：AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式（SDK/HTTP/SpringAI/langchain4j）

热门文章

最新文章

  • 1
    如何配置 Java 环境变量：设置 JAVA_HOME 和 PATH
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    什么是tomcat？tomcat是干什么用的？
  • 5
    Webpack和Vite的区别
  • 6
    微信小程序：本地开发环境和线上环境配置
  • 7
    数据人必读！玩转数据可视化用这个就够了——高德LOCA API 2.0升级来袭！
  • 8
    Point Grey articles link
  • 9
    数据库负载急剧提高的应急处理(二)
  • 10
    软刀子割肉：智能电视的软陷阱
  • 1
    《政企API网关：安全与性能平衡的转型实践》
    37
  • 2
    《SaaS网关多租户治理：从串流到稳控的实践》
    30
  • 3
    从DQN到Double DQN：分离动作选择与价值评估，解决强化学习中的Q值过估计问题
    31
  • 4
    Aquarius 官方发布 3 级海面密度标准映射图像季节性数据 V5.0
    71
  • 5
    【Azure App Service】Root CA on App Service
    46
  • 6
    基于springboot的非遗传承宣传平台
    47
  • 7
    Proxmox Mail Gateway 9.0 正式版发布 - 全面的开源邮件安全平台
    34
  • 8
    VMware NSX 9.0.1.0 发布 - 下一代网络安全虚拟化平台
    61
  • 9
    爬坑 10 年！京东店铺全量商品接口实战开发：从分页优化、SKU 关联到数据完整性闭环
    37
  • 10
    VMware vSphere 9.0.1.0 发布 - 企业级工作负载平台
    33

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费