跑马灯效果
2016-05-01 19:13
381 查看
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> body { background: #FFF; } input { background: transparent; border: none; color: #ff4332; font-size: 45px; font-weight: bold; font-family: "微软雅黑"; } </style> <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> <script type="text/javascript"> var msg = "品味中原文化,寄情黄河风景,空谷寻香觅幽兰,驾着蜗牛追导弹"; // 移动的文字 var interval = 400; // 移动的速度 var seq = 0; function LenScroll() { document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg; seq++; if (seq > msg.length) seq = 0; // msg.substring(seq, msg.length)这句就是 截取 msg字符变量,从0到seq+1 个位置 的字符 。 // 如果seq=0的话 截取字符就是H。seq++ 就是为了 能把msg整个这截取完。也就是为了实现走马灯效果 window.setTimeout("LenScroll();", interval); } </script> </head> <body onload="LenScroll()"> <center> <form name="nextForm"> <input type="text" name="lenText" /> </form> </center> </body> </html>
result(文字循环播放):
相关文章推荐
- 当自己迷茫的时候要知道怎样去做
- [Java]关于中文编码问题
- SQL查询 [SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY的区别(比较)] ---转载
- 基于jsoup爬虫下载图库
- 提示符设置
- Servlet简单注解方式使用
- 跨网段DHCP的配置
- POJ 2251 Dungeon Master 搜索入门题
- 【数据结构】二叉树遍历
- HDU 5676 ztr loves lucky numbers【DFS】
- HDU 5676 ztr loves lucky numbers【DFS】
- Spring 源码分析
- Dinic算法的原理与构造(转)
- c++之socket,阻塞模式
- 同网段DHCP的配置
- 深入理解Java内存模型——volatile
- 集合
- ios拼图游戏(四)之触摸交换拼图
- for循环实现各种图形输出
- 沙盒、文件以及文件夹的操作