div 无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title></title> <style type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: "宋体"; TEXT-ALIGN: center
}
* {
BACKGROUND-IMAGE: none; background-color:#FAFBF5
}
#scrollWrap {
OVERFLOW: hidden; BORDER-LEFT-STYLE: none; HEIGHT: 25px
}
#scrollMsg {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 680px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
#scrollMsg UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;float:left
}
#scrollMsg LI {
LINE-HEIGHT: 25px; LIST-STYLE-TYPE: none
}
</style> </head>
<body>
<div id="scrollWrap">
<div id="scrollMsg">
<ul>
<li><font color="#069138">《三字经》</font> 人之初 性本善 性相近 习相远 苟不教 性乃迁
<font color="#ff0000">《三字经》</font>
</li>
<li><font color="#069138">《三字经》</font> 教之道 贵以专 昔孟母 择邻处 子不学 断机杼
<font color="#ff0000">《三字经》</font>
</li>
<li><font color="#069138">《三字经》</font> 窦燕山 有义方 教五子 名俱扬 养不教 父之过
<font color="#ff0000">《三字经》</font>
</li>
<li><font color="#069138">《三字经》</font> 教不严 师之惰 子不学 非所宜 幼不学 老何为
<font color="#ff0000">《三字经》</font>
</li>
<li><font color="#069138">《三字经》</font> 玉不琢 不成器 人不学 不知义 为人子 方少时
<font color="#ff0000">《三字经》</font>
</li>
</ul></div>
</div>
<script type="text/javascript">
<!--
try{
var isStoped = false;
var oScroll = document.getElementById("scrollWrap");
with(oScroll){
noWrap = true;
} oScroll.onmouseover = new Function('isStoped = true');
oScroll.onmouseout = new Function('isStoped = false'); var preTop = 0;
var curTop = 0;
var stopTime = 0;
var oScrollMsg = document.getElementById("scrollMsg"); oScroll.appendChild(oScrollMsg.cloneNode(true));
init_srolltext();
}catch(e) {} function init_srolltext(){
oScroll.scrollTop = 0;
setInterval('scrollUp()', 20);
} function scrollUp(){
if(isStoped) return;
curTop += 1;
if(curTop == 26) {
stopTime += 1;
curTop -= 1;
if(stopTime == 120) {
curTop = 0;
stopTime = 0;
}
}else{
preTop = oScroll.scrollTop;
oScroll.scrollTop += 1;
if(preTop == oScroll.scrollTop){
oScroll.scrollTop = 0;
oScroll.scrollTop += 1;
}
}
}
//-->
</script>
</body></html>
div 无缝滚动的更多相关文章
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- Javascript学习之无缝滚动
无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
随机推荐
- docker上安装ActiveMQ
1.查看是否已经存在镜像 docker images 2.搜索镜像 docker search activemq 3.拉取镜像 docker pull webcenter/activemq 4.构建容 ...
- 用星星画菱形--Java
用星星画菱形 public class Hello{ public static void main(String[] args) { char star = '\u2605'; System.out ...
- iOS开发系列-文件上传
概述 Http协议对文件上传协议要求的 1. 必须设置请求头Content-Type为multipart/form-data.在iOS中后面需要跟上分隔符比如:boundary=----WebKitF ...
- dataset datatable 转json
class ToJosn { #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summar ...
- Android开发 音视频开发需要了解的专业术语知识
前言 在摸索一段时间的音视频开发后,越来越发现这个坑的深度真是特别的深. 除了了解Android自带的音视频处理API以外,还得了解一些视频与音频方面的知识.这篇博客就是主要讲解这方面的专业术语.内容 ...
- Loadrunner安装与破解【转】
Loadrunner安装与破解 一.下载 我的LoadRunner 11下载地址是: http://pan.baidu.com/s/1qYFy2DI 二.安装 1.启动安装程序 运行setup.exe ...
- windows安装apache系统中无apache2服务解决方案
一直都是用WIN开发PHP,今天有用户反映SHUGUANG CMS在APACHE+PHP中不能正常运行,只好自己机器配置个环境测试(http://xz.8682222.com)遇到点小问题,搜索相关资 ...
- Python3基础笔记_字符串类型
# 1.Python转义字符 a = "sqwerdf" # 2.Python字符串运算符 ''' + 字符串连接 a + b 输出结果: HelloPython * 重复输出字符 ...
- 主机入侵防御系统(HIPS)分析
主机入侵防御系统(Host Intrusion Prevent System,HIPS)是近几年出现并迅速发展的新兴产物,与传统意义的防火墙和杀毒软件不同,它并不具备特征码扫描和主动杀毒等功能,所以想 ...
- JDK源码阅读--LinkedList
public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, D ...