三、小功能模块——背景无缝滚动

约定不等于承诺〃 2022-03-12 17:43 132阅读 0赞

这个是简单版本的，适合新手，但是所有的复杂的都是在简单的基础上进行修饰，原理是一样的，越努力越优秀

思路：

（1）HTML&CSS：设置一个大的div放置ul，把ul超出的部分隐藏

（2）HTML&CSS：设置一个ul放置li，li浮动向左

（3）JS:

01、设置定时器：让ul每10毫秒移动1px；  
02、当鼠标上移修改li的样式，并且清除定时器，停止ul移动；当移开鼠标ul继续滚动，样式变回原来的样式

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    				list-style: none;
    			}
    			body{
    				background: #000;
    			}
    			div{
    				width: 600px;
    				height: 200px;
    				border: 1px solid #000;
    				margin: 10px auto;
    				overflow: hidden;
    			}
    			li{
    				width: 300px;
    				height: 200px;
    				float: left;
    			}
    			li:nth-of-type(1){
    				background: skyblue
    			}
    			li:nth-of-type(2){
    				background: pink
    			}
    			li:nth-of-type(3){
    				background: orange
    			}
    			li:nth-of-type(4){
    				background: purple
    			}li:nth-of-type(5){
    				background: skyblue
    			}
    			li:nth-of-type(6){
    				background: pink
    			}
    			ul{
    				width: 9999px;
    				position: relative;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div>
    			<ul id="list">
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>
    		
    		<script>
    			var num=0;
    			var timer;
    			var olist=document.getElementById('list');
    			var lis=olist.children;
    			go();
    			function go(){
    				timer=setInterval(function(){
    					if(num<-1200){
    						num=0;
    					}
    				num--;
    				olist.style.left=num+'px';
    			},10)
    			}
    			
    			/*停止定时器*/
    			for(var i=0; i<lis.length;i++){
    				lis[i].onmouseenter=function(){
    					clearInterval(timer);
    					for(var j=0;j<lis.length;j++){
    						lis[j].style.opacity='0.4';
    					}
    					this.style.opacity='1';
    				}
    				lis[i].onmouseleave=function(){
    					for(var j=0;j<lis.length;j++){
    						lis[j].style.opacity='1';
    					}
    					go();
    				}
    			}
    		</script>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220312/f28d3be0a2ac4d6e931fd9533b440d21.png