js實現字幕無縫滾動

時間 2019-11-24

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<style type="text/css">
		.slide-box{
			margin: 0 auto;
			width:800px;
			height:35px;
			overflow:hidden;
		}
		.slide-box-inner{
			width:3600px;
			height:35px;
		}
		.slide-content,.slide-copy{
			float:left;
			height:35px;
		}
		.slide-content a,.slide-copy a{
			display:block;
			width:600px;
			height:35px;
			text-align:center;
			line-height:35px;
			color:#000;
			text-decoration:none;
			float:left
		}

	</style>
</head>
<body>
	<div class="slide-box" id="slideBox">
	    <div class="slide-box-inner">
	        <div class="slide-content" id="slideContent">
	            <a href="#" class="box1" style="background-color: #9CD6D6">孕婦、心血管疾病患者、體內安裝醫院器械者或骨科類疾病患者等不適用按摩功能</a>
	            <a href="#" class="box2" style="background-color: #27E23D">孕婦、心血管疾病患者、體內安裝醫院器械者或骨科類疾病患者等不適用按摩功能</a>
	            <a href="#" class="box3" style="background-color: #2727E2">孕婦、心血管疾病患者、體內安裝醫院器械者或骨科類疾病患者等不適用按摩功能</a>
	        </div>
	        <!-- 雙胞胎兄弟 -->
	        <div class="slide-copy" id="slideCopy">
	        </div>
	    </div>
	</div>


	<script type="text/javascript" language="javascript">
	//大層
	var slideBox = document.getElementById("slideBox");
	//內容層
	var slideContent = document.getElementById("slideContent");
	//拼接層
	var slideCopy = document.getElementById("slideCopy");
	//循環相隔時間
	var speed = 20;
	//複製內容
	slideCopy.innerHTML = slideContent.innerHTML;

	console.log(slideBox.scrollLeft);

	// *無縫切換函數，滾動值>=可視寬度，歸0，不然數值遞增
	function seamlessSlide() {
	    var seeWidth = slideContent.offsetWidth;
	    // console.log(slideBox.scrollLeft)
	    // console.log(seeWidth);
	    if (slideBox.scrollLeft >= seeWidth) {
	        slideBox.scrollLeft = 0;
	    } else {
	        slideBox.scrollLeft++;
	    }
	}



	//每10毫秒循環執行slide
	var runslide = setInterval(seamlessSlide, speed);
	//鼠標移到大層，循環終止
	slideBox.onmouseover = function() {
	        clearInterval(runslide);
	    }
	    // //鼠標移開時，繼續循環
	slideBox.onmouseout = function() {
	    setTimeout(function() {
	        runslide = setInterval(seamlessSlide, speed);
	    }, 300);
	}
	</script>
</body>
</html>

結果：javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。