原理是通过一个字一个字的减少来实现向左移动的效果
这是通过表单达成的效果
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯文字特效</title> </head> <body onload="banner()"> <form action="" method="post" name="form"> <input type="text" size="48" maxlength="256" name="banner"> </form> <script> var id, pause = 0, position = 0; function banner(){ var i, k; var m1 = " 你好！欢迎学习。"; var m2 = " 你好！欢迎观看。"; var m3 = " 你好！欢迎观看1。"; var m4 = " 你好！欢迎观看2。"; var msg = m1 + m2 +m3 +m4; // var speed = 10; document.form.banner.value = msg.substring(position,position+160); if (position++==msg.length) { position = 0; } id=setTimeout("banner()",200); } var $=function(sel){ return document.querySelector(sel); } $('input').onmouseover=function(){ window.clearInterval(id); } $('input').onmouseout=function(){ banner(); } </script> </body> </html>
这里很讨厌的是，把<script></script>放在表单前，就会失去效果。
思路分为：
1.html部分
<body onload="banner()"> <form action="" method="post" name="form"> <input type="text" size="48" maxlength="256" name="banner"> </form> </body>
需要在body标签里加上onload="banner()"属性，即页面加载时调用。
2.js部分
<script>
var id, pause = 0, position = 0;
function banner(){
var i, k;
var m1 = " 你好！欢迎学习。";
var m2 = " 你好！欢迎观看。";
var m3 = " 你好！欢迎观看1。";
var m4 = " 你好！欢迎观看2。";
var msg = m1 + m2 +m3 +m4;
// var speed = 10;
document.form.banner.value = msg.substring(position,position+160);
if (position++==msg.length) {
position = 0;
}
id=setTimeout("banner()",200);
}</script>
以上为创建个banner()函数，
1）var msg=m1+m2+m3+m4； //是连接定义的字符，一个两个都无所谓。
2）document.form.banner.value = msg.substring(position,position+160); //提取字符并放进input表单里。
.substring(start，end)函数，获取字符串中从第start个字符开始，然后到end-1个结束。由于上述的字符总共都没有到160个，所以这个数可以随便设，只要大于总字符数就行。
3）if(position++==msg.length){position=0;}表示当变量position的数值等于msg.length的长度时，就重新将position归零。
4）id=setTimeout("banner()",200); 表示每过200毫秒，就重新调用bannner()函数。就能呈现走马灯效果。
var $=function(sel){ //这是自定义选择器 return document.querySelector(sel); } $('#a').onmouseover=function(){ //这是鼠标悬停时，停止走马灯效果 window.clearInterval(id); } $('#a').onmouseout=function(){ //这是鼠标离开后，继续走马灯效果 id=setInterval("banner()",200); }
下面是放进div中，就是把document.form.banner.value = msg.substring(position,position+160);这部分换成document.getElementById('a').innerHTML = msg.substring(position,position+160);这部分罢了
效果图片如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯文字特效</title> </head> <body> <div id="a"></div> <script> var id=null, pause = 0, position = 0; function banner(){ var i, k; var m1 = " 你好！欢迎学习。"; var m2 = " 你好！欢迎观看。"; var m3 = " 你好！欢迎观看1。"; var m4 = " 你好！欢迎观看2。"; var msg = m1 + m2 +m3 +m4; // 这是通过一个字一个字减少的方式实现的走马灯 document.getElementById('a').innerHTML = msg.substring(position,position+160); if (position++==msg.length) { position = 0; } } id=setInterval("banner()",200); var $=function(sel){ return document.querySelector(sel); } $('#a').onmouseover=function(){ window.clearInterval(id); } $('#a').onmouseout=function(){ id=setInterval("banner()",200); } </script> </body> </html>