- A+
所属分类：.NET技术
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>
