<!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. C# 、winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示

    C# .winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示 解决方法一:设置label的Tag属性值与skinEngine的DisableTag属性值相同即可.默认值是9 ...

  2. 05_Smart-image通过SoftReference提高性能

    文章导读: 文件介绍了常见的图片下载开源插件smart-image, 由于移动设备硬件受限,因此Android的相关app都要考虑到性能的关系, 所以很多的第三方插件都使用到了缓存cache技术,本人 ...

  3. thinkphp 邮件发送

    最近项目上要求,要做个邮件发送的功能,因为用到的框架是ThinkPHP,于是就自己整理一下. 引入class.phpmailer.php,大家可以去这个链接去下载: http://pan.baidu. ...

  4. 46 Permutations(全排列Medium)

    题目意思:全排列 思路:其实看这题目意思,是不太希望用递归的,不过还是用了递归,非递归的以后再搞吧 ps:vector这玩意不能随便返回,开始递归方法用vector,直接到500ms,换成void,到 ...

  5. layer弹出标签层tab

    引入文件: <script type="text/javascript" src="layer/layer.min.js"></script& ...

  6. IIS6中ASP.NET实现对静态文件的授权控制

    后台使用html+ashx+js开发 在VS2008调试并未发现问题 发布到IIS6才发现不需要验证也能访问html文件 解决这个问题配置IIS即可了 方法如下: IIS配置:网站->属性-&g ...

  7. 前端面试题第二波，要offer的看过来~

    快来测试测试自己掌握能力吧! 1. class.forname的作用?为什么要用? 1).获取Class对象的方式:类名.class.对象.getClass().Class.forName(" ...

  8. getsockname和getpeername函数

    这2个函数或者返回与某个套接字关联的本地协议地址(getsockname),或者返回与某个套接字关联的外地协议地址(getpeername) int getsockname(int sockfd, s ...

  9. 怎样导入SDWebImage

    Two ways : 方法1:copy all the files into your project. --下载https://github.com/rs/SDWebImage. --把SD项目co ...

  10. 托管host

    托管在googlecode的host https://smarthosts.googlecode.com/svn/trunk/hosts