<!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">

#block2{height:23px;width:500px;border:#ccc 1px solid;font-size:12px;text-align:center;}

#block2 ul{list-style:outside none none;height:17px;padding:3px 0;overflow:hidden;margin:0;}

#block2 ul li{float:left;display:inline;margin:2px 0;height:14px;width:24.9%;}

#block2 ul li a{text-decoration:none;}

</style>

</head>

<body>

<div id="block2">

  <ul id="rolltxt">

    <li><a href="http://www.jb51.net">脚本之家</a>1</li>

    <li><a href="http://www.jb51.net">脚本之家</a>2</li>

    <li><a href="http://www.jb51.net">脚本之家</a>3</li>

    <li><a href="http://www.jb51.net">脚本之家</a>4</li>

    <li><a href="http://www.jb51.net">脚本之家</a>5</li>

    <li><a href="http://www.jb51.net">脚本之家</a>6</li>

    <li><a href="http://www.jb51.net">脚本之家</a>7</li>

    <li><a href="http://www.jb51.net">脚本之家</a>8</li>

    <li><a href="http://www.jb51.net">脚本之家</a>9</li>

    <li><a href="http://www.jb51.net">脚本之家</a>10</li>

    <li><a href="http://www.jb51.net">脚本之家</a>11</li>

    <li><a href="http://www.jb51.net">脚本之家</a>12</li>

    <li><a href="http://www.jb51.net">脚本之家</a>13</li>

    <li><a href="http://www.jb51.net">脚本之家</a>14</li>

    <li><a href="http://www.jb51.net">脚本之家</a>15</li>

    <li><a href="http://www.jb51.net">脚本之家</a>16</li>

  </ul>

<script type="text/javascript">

function extractNodes(pNode){

    if(pNode.nodeType == 3)return null;

    var node,nodes = new Array();

    for(var i=0;node= pNode.childNodes[i];i++){

        if(node.nodeType == 1)nodes.push(node);

    }

    return nodes;

}

var obj=document.getElementById("rolltxt");

for(i=0;i<4;i++){

    obj.appendChild(extractNodes(obj)[i].cloneNode(true));

}

settime=0;

var t=setInterval(rolltxt,50);

function rolltxt(){

    if(obj.scrollTop % (obj.clientHeight-5) ==0){

        settime+=1;

        if(settime==50){

            obj.scrollTop+=1;

            settime=0;

        }

    }else{

        obj.scrollTop+=1;

        if(obj.scrollTop==(obj.scrollHeight-obj.clientHeight)){

            obj.scrollTop=0;

        }

    }

}

obj.onmouseover=function(){clearInterval(t)}

obj.onmouseout=function(){t=setInterval(rolltxt,50)}

</script>

</div>

</body>

</html>

纯html上下翻滚效果公告板的更多相关文章

  1. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  3. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  4. jq实现鼠标经过图片翻滚效果

    短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: <ul class="list" ...

  5. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  7. Android - 文字向上翻滚效果的实现

    本文转载https://xwc2013.iteye.com/blog/1976051 今天看到了一种文字翻滚的效果,感觉非常实用.所以就自己试着做出了这种效果,现在把它分享给大家! 首先在res目录下 ...

  8. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  9. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

随机推荐

  1. 在Visio里加上、下标方法

    添加上标:选中要成为上标的文字,ctrl+shift+“=” 添加下标:选中要成为下标的文字,ctrl+“=”

  2. https页面打不开

    https://blog.csdn.net/leedaning/article/details/71552625

  3. Kafka（一）Kafka的简介与架构

    一.简介 1.1 概述 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/ng ...

  4. 【58沈剑架构系列】mysql并行复制优化思路

    一.缘起 mysql主从复制,读写分离是互联网用的非常多的mysql架构,主从复制最令人诟病的地方就是,在数据量较大并发量较大的场景下,主从延时会比较严重. 为什么mysql主从延时这么大? 回答:从 ...

  5. 【LOJ】#2040. 「SHOI2015」零件组装机

    题解 我写的应该有bug但是我懒得改了 就是最后一次合并的n要么是0点边集的最后一条边,要么是0点边集最后两条边的差,我们分别拎出来判断一下哪个可行(也许两个都可行,但是我不想多做修改了--) 然后递 ...

  6. 【51nod】1564 区间的价值

    题解 这个要注意到一个长度大的区间的最大价值一定比长度小的区间的价值要大 然后我们以每个点为最小值,显然区间越长最大值越大,然后我们更新最大区间长度的取值,这个可以用单调栈求这个最小值能更新到的左右端 ...

  7. 黑马程序员_java基础笔记(01)...java的环境搭建

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!——————————  JavaSE(Java Standard Edtion java标准版)技术概况 ...

  8. Jersey入门一：从Maven Archetype创建jersey项目

    1.用Ctrl+空格调出Spotlight搜索,输入ter调出终端窗口  2.在终端窗口进入将创建jersey项目的目录:  3.输入如下命令,创建一个名为的simple-service项目: m ...

  9. caffe fine tune 复制预训练model的参数和freeze指定层参数

    复制预训练model的参数,只需要重新copy一个train_val.prototxt.然后把不需要复制的层的名字改一下,如(fc7 -> fc7_new),然后fine tune即可. fre ...

  10. 洛谷P3527 [POI2011]MET-Meteors [整体二分]

    题目传送门 Meteors 格式难调,题面就不妨放了. 分析: 一道整体二分的练手题. 就是一般的整体二分的套路,但是要注意,将修改和询问加入队列的时候要先加修改再加询问.另外,博主代码打得太丑,常数 ...