<!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. shareSDK微博分享出现: 分享失败: 错误描述:Insufficient app permissions! 错误码:10014

    这个错误是由于appKey所在账号没有微博高级写入接口权限, 需要申请, 详见: http://www.mamicode.com/info-detail-936938.html

  2. GetComponents和FindObjectsOfTypeAll区别

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/Unity_GetComponent.html GetComponents获得的是当 ...

  3. 【USACO 1.2.4】回文平方数

    [题目描述] 回文数是指从左向右念和从右向左念都一样的数.如12321就是一个典型的回文数. 给定一个进制B(2<=B<=20,由十进制表示),输出所有的大于等于1小于等于300(十进制下 ...

  4. LINUX系统安装MYSQL命令，纯手打

    1.下载安装包 wget http://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.26-linux-glibc2.5-x86_64.tar.gz    2. ...

  5. spring 入门笔记(一)

    最近学习spring 通过笔记形式加深自己对spring的理解,也希望能跟各位入门者分享和讨论. 一.下载spring 下载spring也费了不少功夫,目前还没从spring官网找到下载入口,我从下面 ...

  6. c#中使用easyUI的DataGrid组件

    前台页面 html <table id="dg"> </table> JavaScript $("#dg").datagrid({ wi ...

  7. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  8. 关于几种常用的Adapter使用区别

    Adapter常用的实现类如下: 1.ArrayAdapter:简单.易用的Adapter,通常用于将数组或List集合的多个值包装成多个列表项. 2.SimpleAdapter:并不简单.功能强大的 ...

  9. Solr4.8.0源码分析(6)之非排序查询

    Solr4.8.0源码分析(6)之非排序查询 上篇文章简单介绍了Solr的查询流程,本文开始将详细介绍下查询的细节.查询主要分为排序查询和非排序查询,由于两者走的是两个分支,所以本文先介绍下非排序的查 ...

  10. 『Python』 多线程 共享变量的实现

    简介: 对于Python2而言,对于一个全局变量,你的函数里如果只使用到了它的值,而没有对其赋值(指a = XXX这种写法)的话,就不需要声明global. 相反,如果你对其赋了值的话,那么你就需要声 ...