js文字滚动停顿效果代码


Posted in Javascript onJune 28, 2008

<!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>间断滚动_3water.com_三水点靠木</title>
<style>
#Marquee{ height:60px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
</style>
</head>
<body>
<div id="Marquee">
    <div style="width: 160px; height: 58px">间断-1-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-2-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-3-caiying2007</div>
</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 60;//移动高度
var scrollstep=3;//移动步幅,越大越快
var scrolltime=20;//移动频度(毫秒)越大越慢
var stoptime=3000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
    if(tmpH < picH){
        tmpH += scrollstep;
        if(tmpH > picH )tmpH = picH ;
        Mar.scrollTop = tmpH;
        setTimeout(start,scrolltime);
    }else{
        tmpH = 0;
        Mar.appendChild(child_div[0]);
        Mar.scrollTop = 0;
        setTimeout(start,stoptime);
    }
}
onload=function(){setTimeout(start,stoptime)};
</script></body>
</html>

Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
js兼容标准的表格变色效果
Jun 28 #Javascript
js查找父节点的简单方法
Jun 28 #Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 #Javascript
JavaScript 给汉字排序实例代码
Jun 28 #Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 #Javascript
JS解密入门 最终变量劫持
Jun 25 #Javascript
JS解密入门之凭直觉解
Jun 25 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python中turtle作图示例
2017/11/15 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python如何保证输入键入数字的方法
2019/08/23 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
大专学生求职信
2014/07/04 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
小班上学期个人总结
2015/02/12 职场文书
保留意见审计报告
2015/06/05 职场文书
高二语文教学反思
2016/02/16 职场文书
如何正确理解python装饰器
2021/06/15 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL