//scrollBodyId:  String 内部滚动div的id

//scrollBoxId:  String 外面限制div的id

//showHeight:  Int 限制显示高度

//showWidth:  Int 限制显示宽度

//lineHeight:  Int 每行的高度

//stopTime:    Int 间隔停止的时间(毫秒)

//speed:    Int 滚动速度(毫秒,越小越快)

//var sample = new ScrollObj("scroollBody","scroollBox",36,300,19,50,50);

var ScrollObj = function(scrollBodyId,scrollBoxId,showHeight,showWidth,lineHeight,stopTime,speed) {

this.obj = document.getElementById(scrollBodyId);

this.box = document.getElementById(scrollBoxId);

this.style = this.obj.style;

this.defaultHeight = this.obj.offsetHeight;

this.obj.innerHTML += this.obj.innerHTML;

this.obj.style.position = "relative";

this.box.style.height = showHeight;

this.box.style.width = showWidth;

this.box.style.overflow = "hidden";

this.scrollUp = doScrollUp;

this.stopScroll = false;

this.curLineHeight = 0;

this.lineHeight = lineHeight;

this.curStopTime = 0;

this.stopTime = stopTime;

this.speed = speed;

this.style.top = lineHeight;

this.object = scrollBodyId + "Object";

eval(this.object + "=this");

setInterval(this.object+".scrollUp()",speed);

this.obj.οnmοuseοver=new Function(this.object+".stopScroll=true");

this.obj.οnmοuseοut=new Function(this.object+".stopScroll=false");

}

function doScrollUp(){

if( this.stopScroll == true )

return;

this.curLineHeight += 1;

if( this.curLineHeight >= this.lineHeight ){

this.curStopTime += 1;

if( this.curStopTime >= this.stopTime ){

this.curLineHeight = 0;

this.curStopTime = 0;

}

}

else{

this.style.top = parseInt(this.style.top) - 1;

if( -parseInt(this.style.top) >= this.defaultHeight ){

this.style.top = 0;

}

}

}

凡是有该标志的文章,都是该blog博主Caoer(草儿)原创,凡是索引、收藏

、转载请注明来处和原文作者。非常感谢。

java把字体做成滚动的_Scroll text - JS实现文字自动循环滚动效果相关推荐

  1. CSS+JS自动循环滚动的多图片幻灯切换展示效果

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

  2. html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...

  3. js实现文字从右滚动到左边代码循环滚动实例

    说明:实现js文字从右边到左滚动循环的效果 适用:所有支持js的页面均可 效果图: 代码片段: <html><head><meta charset="UTF-8 ...

  4. msclass 文字滚动_文字无缝循环滚动(标题向上滚动)

    要写一个标题滚动的效果,开始以为挺简单用marquee就行了呢.用了才知道,它总是要等一次滚动后再循环,所以很不好看.才知道只有用js了. 在网上找了一个js感觉挺好的. ============== ...

  5. android listview 自动循环滚动条,ListView的自动循环滚动显示【原创】

    最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...

  6. android item弹出popupwindow recycleview_Android实现RecycleView嵌套RecycleView中的item自动循环滚动功能...

    利用RecyclerView实现无限循环滚动 一.先上效果图 二.GitHub地址 GitHub地址 https://github.com/MNXP/AutomaticRolling‍ 三.思路 Re ...

  7. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...

  8. html中图片自动循环滚动代码,实现长图片自动循环滚动效果

    实现思路 滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...

  9. div内实现文字左右循环滚动

    2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

最新文章

  1. 2022-2028年中国企业核心路由交换机行业市场前瞻与投资分析报告
  2. android软件安全权威指南 pdf_AV-TEST 发布 2019 最佳 Android 安全软件榜单
  3. 可以预防新冠病毒的项链 -脉动
  4. mysql-mha高可用
  5. Pandas必知必会的使用技巧,值得收藏!
  6. 如何解决Ubuntu 12.04(64位)系统在virtualbox环境下无法开机自动挂载共享目录的问题
  7. java基础篇---网络编程(UDP程序设计)
  8. Asp.Net Core安全防护-客户端IP白名单限制
  9. 数据库系统实训——实验十——事务
  10. 小心这 10 个云计算错误!
  11. 详解由VS 2010生成的Bug报告(2) - 报告的内容
  12. 学生信息管理系统(附运行效果图和源码下载)分页技术(后台封装json数据传递到前端显示,动态分页等)(Mybatis,json,ajax,jQuery实用整合示例)
  13. vb连接odbc连接mysql数据库_vb6通过ODBC连接mysql数据库
  14. 用91卫图助手获取研究区(勾画研究矢量shp格式范围等)
  15. Java版本微信授权登录(升级版)
  16. 如何将onedrive for business扩容为硬盘空间
  17. Sql练习--查询有趣的电影
  18. 从维基百科复制数学公式
  19. 尚硅谷MySQL基础部分的笔记
  20. Redis总结二 - 测试案例

热门文章

  1. centos7启动root账户_新手小白使用vm安装Linux系统centos7虚拟机详细教程
  2. 如何表达清楚一个程序:模块化设计
  3. ES6更新的3种精简化代码,(1.速写属性 2.速写方法 3.模板字符串)
  4. printf打印二进制_优雅地打印 HEX 数据
  5. python复杂网络全局效率计算_python复杂网络库networkx:算法
  6. P2:图像分类:KNN与线性分类器
  7. 计算机网络 第五章 运输层
  8. 目标检测——使用OpenCV读取图片要注意进行维度变换
  9. MATLAB编程思想
  10. “RuntimeError: main thread is not in main loop“的几种解决方案