<!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. iOS开发中常用的宏

    前言 今天将一些简化工程代码的宏定义拿出来分享一下,自定义一些宏可以有效的简化代码,提高编码效率. Application #define APPLICATION [UIApplication sha ...

  2. AMD和CMD的区别

    1.cmd define(function(require,export){ var b = 1; var a = require('./a'); a.dosomething(); }); 2.amd ...

  3. Java基础--IO

    1,流的认识和分类 2,Java种处理流的IO类架构 3,字节流和字符流转换 4,NIO的概述 5,Java IO关闭资源 1,流的认识和分类 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的 ...

  4. How to scroll the window using JQuery $.scrollTo() function

    $('html, body').animate({scrollTop: $("#page").offset().top}, 2000); http://stackoverflow. ...

  5. （兼容IE6）又一个提示框思密达，腾讯UED 201401242352

    找乐子 仿QQ空间的,先来看下,别嫌代码垃圾,业余菜鸟一个,用到的话就当个乐子就行了 注意: 因为有同学说需要IE6便做了一下. 已经处理了IE6,可测试. 腾讯的东西,感觉还好吧:) 使用方法老简单 ...

  6. 如何写angularJS模块

    angularJS中提供模块的概念,供我们把代码封装在模块单元中,使用模块能给我们带来的好处 保持全局命名空间的清洁 易于在不同应用间复用代码 demo.html <!doctype html& ...

  7. js 遇到 Permission denied to access property ***

    在开发过程 子页面刷新父页面时,中遇到的 Permission denied to access property *** 问题,处理如下: 这是一个跨域的问题,其实很简单 就是子页面所在域名不在父页 ...

  8. mysql的sql优化案例

    前言 mysql的sql优化器比较弱,选择执行计划貌似很随机. 案例 一.表结构说明mysql> show create table table_order\G***************** ...

  9. Watchcow

    传送门 题目大意: 给你一幅连通的图,要求从起点1开始走,要经过每条边刚好两次,并且最终回到1起点. 思路:将无向图转换成有向图求欧拉回路. #include<cstdio> #defin ...

  10. 创建局域网内远程git仓库，并将本地仓库push推到远程仓库中

    转载请注明出处 http://www.goteny.com/articles/2014/06/136.html http://www.cnblogs.com/zjjne/p/3778640.html ...