今天给大家分享一个新闻滚动的效果 具体代码如下
task1
HTML结构
1 <div class="box"> 2 <div class="count1"> 3 <p>1号标题</p> 4 <p>2号标题</p> 5 <p>3号标题</p> 6 <p>4号标题</p> 7 <p>5号标题</p> 8 </div> 9 <div class="count2"> 10 <!-- 这个盒子放得内容和上面一样 目的是达到无缝滚动状态 --> 11 </div> 12 </div>
CSS结构
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 list-style: none; 6 } 7 8 .box { 9 width: 300px; 10 height: 30px; 11 border: solid 1px; 12 margin: 200px auto 0; 13 overflow: hidden; 14 } 15 16 p { 17 width: 100%; 18 text-align: center; 19 height: 30px; 20 line-height: 30px; 21 } 22 </style>
JS代码
1 <script> 2 let box = document.querySelector(".box"); 3 let count1 = document.querySelector(".count1"); 4 let count2 = document.querySelector(".count2"); 5 count2.innerHTML=count1.innerHTML;//将第一个盒子的内容原样复制给第二个盒子 6 setInterval(()=>{ 7 box.scrollTop++; //在定时器中利用滚动scrollTop的增加达到滚动效果 8 if(box.scrollTop>=count1.offsetHeight){ 9 //当超过第一个盒子高度的时候让scrollTop归零 10 box.scrollTop=0; 11 } 12 },80) 13 </script>
task2
今天给大家再分享另一个方法一个HTML5的新标签也能够实现这种效果
语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。 默认从左往右不断循坏的播放
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
还可以添加几个属性来达到不同的需求
1.滚动方向direction（包括4个值：up、 down、 left和 right）
语法：<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
语法：<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
语法：<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
语法：<marquee scrolldelay="100">...</marquee>
注意这个滚动延迟不是指的刚开始的时候延迟 是每动一下就延迟这么久 效果和放慢速度差不多
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
语法：<marquee loop="2">...</marquee>
设置页面可以滚动几次
6、
滚动范围width、height
滚动背景颜色bgcolor
这两个也可以通过css的样式给这个标签外层盒子设置
7、hspace和vspace属性
这两个属性决定滚动矩形区域距周围的空白区域.
<marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
<marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
8、在事件里面可以获取这个标签scrollTop或者scrollLeft值 然后可以通过他们判断达到某一些操作
9、标签.stop() 是停止运动 start（）是开始
不过此标签虽然仍可以使用 但是似乎被废除