Maison > Article > interface Web > Code d'effet de défilement horizontal ininterrompu
Code d'effet de défilement horizontal ininterrompu
- php中世界最好的语言original
- 2017-12-16 10:51:322043parcourir
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment Dreamweaver utilise-t-il la structure de cadre pour créer rapidement des pages Web ?_Dreamweaver Tutorial_Web Page ProductionArticle suivant：Comment Dreamweaver utilise-t-il la structure de cadre pour créer rapidement des pages Web ?_Dreamweaver Tutorial_Web Page Production