龙空技术网

JavaScript-滚动标题 242

源丁编程 266

前言:

现在大家对“js点击左右滚动”大概比较关切,同学们都想要学习一些“js点击左右滚动”的相关文章。那么小编同时在网络上汇集了一些对于“js点击左右滚动””的相关知识,希望看官们能喜欢,各位老铁们一起来学习一下吧!

通过js中的定时器实现标题走马灯的效果;通过向左向右按钮控制标题滚动方向

<!DOCTYPE html><html xmlns=";><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>★滚动标题,实现走马灯效果☆</title>    <script type="text/javascript">        //页面加载完毕后执行        window.onload = function () {            //设置一个变量控制标题滚动方向            var dir = 'left';//默认向左滚动            window.setInterval(function () {                //设置向左滚动                if (dir == 'left') {                    //截取标题的第一个字符                    var firstChar = document.title.charAt(0);                    //截取剩余字符                    var othersChar = document.title.substr(1);                    //重新拼接组合标题字符 再赋值给title标签                    document.title = othersChar + firstChar;                    // 设置向右滚动                } else if (dir == 'right') {                    //截取标题最后的第一个字符                    var lastChar = document.title.charAt(document.title.length - 1);                    //截取剩余字符                    var othersChar = document.title.substring(0, document.title.length - 1);                    //重新赋值给title标签                    document.title = lastChar + othersChar;                }            }, 500);            //=========================================            //为两个按钮注册单击事件            document.getElementById('btnLeft').onclick = function () {                //修改方向变量  设置标题字符向左滚动                dir = 'left';            }            document.getElementById('btnRight').onclick = function () {                //修改方向变量  设置标题字符向右滚动                dir = 'right';            }        }    </script></head><body>    <input type="button" id="btnLeft" value="向左滚动" />    <input type="button" id="btnRight" value="向右滚动" /></body></html>

注意:截取字符串方法 subStr()与subString()的区别,之前说过不再赘述

标签: #js点击左右滚动