走马灯特效

最新推荐文章于 2021-05-21 02:38:55 发布

weixin_30947043

最新推荐文章于 2021-05-21 02:38:55 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/yinwangyizhi/p/9449587.html

版权

原理是通过一个字一个字的减少来实现向左移动的效果

这是通过表单达成的效果

代码如下：

<!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标签里加上οnlοad="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').οnmοuseοver=function(){　　//这是鼠标悬停时，停止走马灯效果
        window.clearInterval(id);
    }
    $('#a').οnmοuseοut=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>

转载于:https://www.cnblogs.com/yinwangyizhi/p/9449587.html

weixin_30947043

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
走马灯特效

原理是通过一个字一个字的减少来实现向左移动的效果这是通过表单达成的效果代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯文字特效</title> </head...
复制链接

扫一扫