欢迎光临
我的个人博客网站

js操作文字横向滚动

HTML:

<div id="scroll_div">         <div id="scroll_begin">             <span class="pad_right">这是第一条信息的内容这是第一条信息的内容这是第一条信息的内容的斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较接佳佳啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>         </div>         <div id="scroll_end"></div>      </div>

CSS:

 <style>       #scroll_div {     height: 30px;     line-height: 30px;     overflow: hidden;     white-space: nowrap;     width: 800px;     background-color: #23527c;     color: #d8d8d8;     margin: 1rem 0;     text-align: center; } #scroll_begin,#scroll_end {     display: inline; }

JS:鼠标移上去时滚动,鼠标移除时停住

<script>     function ScrollImgLeft() {         var speed = 40;//初始化速度 也就是字体的整体滚动速度         var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容         var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id         var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id         var scroll_div = document.getElementById("scroll_div");//获取整体的开头id         scroll_end.innerHTML = scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!         //定义一个方法         function Marquee() {             if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){                 scroll_div.scrollLeft -= scroll_begin.offsetWidth;             } else{                 scroll_div.scrollLeft++;             }         }         //鼠标滑入这条公告栏的时候,清除上面的方法,让公告栏暂停         scroll_div.onmouseover = function () {             MyMar = setInterval(Marquee, speed);         }         //鼠标滑出这条公告栏的时候,公告栏继续移动         scroll_div.onmouseout = function () {             clearInterval(MyMar);             // scroll_div.scrollLeft =0;         }             }     ScrollImgLeft(); </script>

JS:鼠标移上去时滚动,鼠标移除时回到最初的样子,停住

<script>     function ScrollImgLeft() {         var speed = 40;//初始化速度 也就是字体的整体滚动速度         var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容         var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id         var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id         var scroll_div = document.getElementById("scroll_div");//获取整体的开头id         scroll_end.innerHTML = scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!         //定义一个方法         function Marquee() {             if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){                 scroll_div.scrollLeft -= scroll_begin.offsetWidth;             } else{                 scroll_div.scrollLeft++;             }         }         //鼠标滑入这条公告栏的时候,清除上面的方法,让公告栏暂停         scroll_div.onmouseover = function () {             MyMar = setInterval(Marquee, speed);         }         //鼠标滑出这条公告栏的时候,公告栏继续移动         scroll_div.onmouseout = function () {             clearInterval(MyMar);             scroll_div.scrollLeft =0;         }     }     ScrollImgLeft(); </script>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » js操作文字横向滚动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏