走马灯特效
原理是通过一个字一个字的减少来实现向左移动的效果
这是通过表单达成的效果
代码如下:
<!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>