Maison >interface Web >tutoriel HTML >Code d'effet de défilement horizontal ininterrompu
Code de défilement horizontal ininterrompu DIV+CSS+JS complet :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV</title> </head> <body> <style> .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */ </style> <script language="javascript"> function ScrollImgLeft(){ var speed=20 var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML function Marquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth else scroll_div.scrollLeft++ } var MyMar=setInterval(Marquee,speed) scroll_div.onmouseover=function() {clearInterval(MyMar)} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} } </script> <h2 align="center"><a href="http://www.php.cn/">DIV</a>演示说明:向左滚动</h2> <div style="text-align:center"> <div class="sqBorder"> <!--#####滚动区域#####--> <div id="scroll_div" class="scroll_div"> <div id="scroll_begin"> <ul> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" alt="div css" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" alt="divcss" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> <li><a href="http://www.php.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> <li><a href="http://wwwphp.cn/"><img src="http://www.php.cn/img/css-logo.gif" /></a></li> </ul> </div> <div id="scroll_end"></div> </div> <!--#####滚动区域#####--> </div> <script type="text/javascript">ScrollImgLeft();</script> </div> <!--//向左滚动代码结束--> </body></html>
Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !
Lecture connexe :
Réponses aux questions sur la dénomination des cas de chameaux et JS
Résumé du framework js frontal et explication de ses utilisations
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!