<!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. 移动端css单位之 “vh” & “vw”

    一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...

  2. install vscode on centos

    1.down load package from https://code.visualstudio.com/docs/?dv=linux64 2.tar zxf code-stable-code_1 ...

  3. Dijkstra算法---HDU 2544 水题(模板)

    /* 对于只会弗洛伊德的我,迪杰斯特拉有点不是很理解,后来发现这主要用于单源最短路,稍稍明白了点,不过还是很菜,这里只是用了邻接矩阵 套模板,对于邻接表暂时还,,,没做题,后续再更新.现将这题贴上,应 ...

  4. [HDU - 5408] CRB and Farm

    题意: 给出一个由n个点组成的凸包,以及凸包内的k个点,问是否能够在凸包上选择最多2k个点构造一个新的 凸包,使得新的凸包覆盖原来的k个点. 要求2k个点覆盖原本的k个点,只要对原k个点构造凸包,然后 ...

  5. Wannafly挑战赛9 D - 造一造

    链接:https://www.nowcoder.com/acm/contest/71/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  6. 牛客练习赛1 A - 矩阵

    链接:https://www.nowcoder.com/acm/contest/2/A来源:牛客网 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至 ...

  7. linux/mac下命令行rm回收站--rmtrash

    Linux.mac的命令行下没有回收站功能,很多时候手一抖就把重要文件给 rm -fr * 了,虽然linux下有可能通过lost +found/debugfs找回,但难度也比较大,不能保证一定能够找 ...

  8. C++实现平衡二叉树

    1.概念 平衡二叉树(AVL Tree)首先要满足二叉树的定义,如下 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: 若左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若右子树不空, ...

  9. 正规表达式 转 NFA C++

    今天来为大家分享一个编译原理中用正规表达式转NFA的小程序 正规表达式就是类似正则一样的式子,例如:(a|b)*abb,最后应该转化为: 大致的处理流程为: 例子中的表达式:(a|b)*abb,|和* ...

  10. python数据分析之csv/txt数据的导入和保存

    约定: import numpy as np import pandas as pd 1 2 3 一.CSV数据的导入和保存 csv数据一般格式为逗号分隔,可在excel中打开展示. 示例 data1 ...