Marquee标签实现跑马灯、滚动公告、通知效果

江山如画 • 2019年2月26日上午10:14 • 网页制作, 网页特效 • 阅读 8670

marquee实例1：制作无缝滚动的公告栏（横向）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>marquee实例1：制作无缝滚动的公告栏（横向）|www.125jz.com</title> </head> <body> <MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"> <SPAN unselectable="on"></SPAN></MARQUEE> <DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;" onmouseover="aa()" onmouseout="b()" > 125网页设计-权威的网页制作，网页设计教程基地 </DIV> <script language="javascript" type="text/javascript">  </script> </body> </html>

Tips:You can change the code before run.

marquee实例2：制作无缝滚动的图片（横向）

扩展：Marquee标签同样适用于图片滚动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Marquee标签实现图片无缝滚动|www.125jz.com</title> <style> *{ margin: 0; padding: 0; } .marquee-wrap{ width: 800px; height: 200px; overflow: hidden; margin: 100px auto; position: relative; border: 5px solid #CCC; } .marquee-wrap ul{ position: absolute; left: 0; top: 0; } .marquee-wrap ul li{ float: left; width: 360px; height: 200px; list-style: none; margin-right:5px; } .marquee-wraps{ position: relative; width: 900px; margin: 100px auto; } .marquee-wraps a:first-child{ position: absolute; left: 0; top: 75px; z-index: 10; } .marquee-wraps a:nth-child(2){ position: absolute; right: 0; top: 75px; z-index: 10; } </style> </head> <body> <div class="marquee-wraps" id="marquee-wraps"> <a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/left.png" alt="" width="55" height="55" class="aligncenter size-full wp-image-3318" /> </a> <a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/right.png" alt="" width="55" height="55" class="aligncenter size-full wp-image-3319" /></a> </div> <div class="marquee-wrap" id="marquee-wrap"> <ul> <li><a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/2019022104040760.png" alt="" width="360" height="200"></a></li> <li><a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/2019022606062077.png" alt="" width="360" height="200"></a></li> <li><a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/2019022104040760.png" alt="" width="360" height="200"></a></li> <li><a href="javascript:"><img src="http://www.125jz.com/wp-content/uploads/2019/02/2019022606062077.png" alt="" width="360" height="200"></a></li> </ul> </div> </body> <script> window.onload=function(){ var oDiv=document.getElementById('marquee-wrap'); var oDiv1=document.getElementById('marquee-wraps'); var oUl=document.getElementsByTagName('ul')[0]; var aLi=document.getElementsByTagName('li'); var speed=-2; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function marqueeFn(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0'; } if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(marqueeFn,30); oDiv.onmouseover=function(){ clearInterval(timer); }; oDiv.onmouseout=function(){ timer=setInterval(marqueeFn,30); }; oDiv1.getElementsByTagName('a')[0].onclick=function(){ speed=-4; }; oDiv1.getElementsByTagName('a')[1].onclick=function(){ speed=2; }; }; </script> </html>

Tips:You can change the code before run.