<!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>upRoll</title>

</head>

<body>

<style type="text/css">

body{margin:0px auto; padding:0px;}

ul,li{margin:0px; padding:0px;list-style:none;}

.scroll_div {width:180px; height:109px; border:1px solid #96C; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}

.scroll_div div{ height:110px;}

</style>

<!--#####滚动区_begin域#####-->

<div style="text-align:center">

    <div id="scroll_div" class="scroll_div">

        <div>

            <ul>

                <li>aaaaaaaaaaaaaaaaaaaaa</li>

                <li>bbbbbbbbbbbbbbbbbbbbb</li>

                <li>ccccccccccccccccccccc</li>

                <li>ddddddddddddddddddddd</li>

                <li>eeeeeeeeeeeeeeeeeeeee</li>

                <li>fffffffffffffffffffff</li>

            </ul>

        </div>

        <div></div>

    </div>

</div>

<div style="height:10px;"></div>

<div style="text-align:center">

    <div id="scroll_diy" class="scroll_div">

        <div>

            <ul>

                <li>ggggggggggggggggggggg</li>

                <li>hhhhhhhhhhhhhhhhhhhhh</li>

                <li>iiiiiiiiiiiiiiiiiiiii</li>

                <li>jjjjjjjjjjjjjjjjjjjjj</li>

                <li>kkkkkkkkkkkkkkkkkkkkk</li>

                <li>lllllllllllllllllllll</li>

            </ul>

        </div>

        <div></div>

    </div>

</div>

<!--#####滚动区域_end#####-->

<script type="text/javascript">

function upRoll(obj,myMar,speed){

    var scroll_obj = document.getElementById(obj);

    var scroll_beg = scroll_obj.getElementsByTagName('div').item(0);

    var scroll_end = scroll_obj.getElementsByTagName('div').item(1);

    scroll_end.innerHTML = scroll_beg.innerHTML;

    var marquee = function(){

        if(scroll_end.offsetHeight - scroll_obj.scrollTop <= 0 ){

            scroll_obj.scrollTop -= scroll_beg.offsetHeight;

        }else{

            scroll_obj.scrollTop++;

        }

    }

    myMar = setInterval(marquee,speed);

    scroll_obj.onmouseover = function(){clearInterval(myMar);}

    scroll_obj.onmouseout  = function(){myMar = setInterval(marquee,speed);}

}

upRoll('scroll_div','sd',50);

upRoll('scroll_diy','se',20);

</script>

</body>

</html>

寫法2

function faqDTScroll(id,w,n){

    var box=document.getElementById(id),can=true,w=w||100,fq=fq||10,n=n==-1?-1:1;

    box.innerHTML  += box.innerHTML;

    box.onmouseover = function(){can=false};

    box.onmouseout  = function(){can=true};

    var max = parseInt(box.scrollHeight/2);

    new function (){

        var stop = box.scrollTop%20==0&&!can;

        if(!stop){

            var set = n > 0 ? [max,0] : [0,max];

            box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n;

        };

        setTimeout(arguments.callee,box.scrollTop%20?fq:w);

    };

}
faqDTScroll('dtscrollID',2000);

javascript內容向上不間斷滾動的更多相关文章

  1. VB.Net DataSet 填充資料庫內容

    '導入命名空間Imports System.Data.OleDb '定義變量 Dim ds As DataSet = New DataSet() Dim i, cn As Integer Dim Sq ...

  2. [jQuery] 使用jQuery printPage plugin打印其他頁面內容

    目標: 點選按鈕後可以打印其他頁面的內容,可用於套版.內部表單套印...等等. 程式碼: 1.View(HTML布局) <h2>維修申請單</h2> <form id=& ...

  3. 利用ASP.NET AJAX的Timer讓GridView每隔一段時間做到自動換頁的功能

    最近在討論區看到這個問題,小弟利用asp.net ajax的timer來實作這個功能 利用timer每隔一段時間,讓gridview自動跳頁並且更新gridview的內容 asp.net(c#) Gr ...

  4. Jquery scrollTop animate 實現動態滾動到頁面頂部

    這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足! 之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能. $.fn.backTop = func ...

  5. [原] XAF 如何啟用ListView橫向滾動條

    using System; using DevExpress.ExpressApp; using DevExpress.ExpressApp.Win.Editors; using DevExpress ...

  6. 使用JavaScript完成文字向上间歇滚动

    使用JavaScript完成文字的间歇滚动 const init = (initData) => { const area = initData.area; // 设置单行滚动的高度: cons ...

  7. JS動態綁定下拉單內容

    function req00_Line1_onChange(obj) {     //if ($(obj).val() != "" && $(obj).val() ...

  8. .NET中通過OUTLOOK發送附件內容

    最近碰到一個發送郵件附件的問題,隨便幾下來,方便以後學習. string[] files = System.IO.Directory.GetFiles(@"~/UploadData" ...

  9. MVC 下拉單數據內容綁定

    #region        /// <summary>授權範圍自建列表</summary>        /// <returns></returns> ...

随机推荐

  1. Objective-C中的内存管理——手动内存管理

    一.引用计数(retainCount) 1.内存的申请 alloc和new是Objective-C语言中申请内存的两种常用方式. 当我们向一个类对象发送一个alloc消息的时候,其会向操作系统在堆中申 ...

  2. 苹果被拒的血泪史。。。（update 2015.11）

    项目提交了N此了,也审核N次了,苹果的审核机制依旧那么不急不慢.昨天刚刚又被拒了.回忆下之前的,总结一下吧. 2015.04.28 昨天被拒非常亏,app的评级是17+,但是在app展示图里有一个比较 ...

  3. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

  4. C语言之头文件，static与const关键字

    [前言] 最近几个月在做一个C语言代码重构的项目,过程中也让我对之前在书本上学习到的东西有些补充和巩固,在本博中总结记录下,梳理下零碎的知识点和经验也加深印象,书写是为了更好地思考.平时也都是用印象笔 ...

  5. c/c++内存机制（一）（转）

    转自:http://www.cnblogs.com/ComputerG/archive/2012/02/01/2334898.html 一:C语言中的内存机制 在C语言中,内存主要分为如下5个存储区: ...

  6. ASP.NET MVC的Action Filter

    一年前写了一篇短文ASP.NET MVC Action Filters,整理了Action Filter方面的资源,本篇文章详细的描述Action Filter.Action Filter作为一个可以 ...

  7. 处理 InnerException 最佳方案？

    如何获取 innerException 内部错误信息 String innerMessage = (ex.InnerException != null) ? ex.InnerException.Mes ...

  8. OPNET安装要点

    最近在做一点网络的仿真工作,需要用到OPNET这个工具,安装了一早上终于安装好了.安装过程如下: 1.安装visual studio 2010:其他版本如vs2005, vs2008也是可以的.vs2 ...

  9. native2ascii 在 Mac终端的转码

    打开终端,输入 native2ascii 回车   然后输入想要转码的 中文   回车   自动会出现  通用的  unicode编码. 默认应该是 utf-8 格式

  10. poj 2516Minimum Cost

    http://poj.org/problem?id=2516 #include<cstdio> #include<cstring> #include<algorithm& ...