Running lantern effect JS text rotation effect realization

The author introduces ：13 Class a graduate , At present, I graduated for one year , Former place of employment: Beijing , One year in office . Little rookie at the front , The former company was a small start-up company , When I graduated, I did python The backend development , Because front-end personnel are nervous , Later, I mainly participated in front-end page development . I have done data analysis and data cleaning in agriculture before , Agricultural page data visualization ,CMS System development . Now Changsha , Mainly responsible for Web Development ,H5 page , Small programs and other front-end work

Current technical capabilities ： I have been studying hard JS Object oriented development ,Vue.js Related technology stack ,Webpack Packaging tools , Applet development ,H5 Mobile page development

Be neither arrogant nor rash , One step at a time , Take advantage of this time to sum up , Good precipitation

---

good , I don't say much nonsense , Let's get to the point

---

# Running lamp effect JS The text rotation effect is realized

Realize the idea ：

• css scrollTop Attributes can control the pixels of the element that are hidden above the content area .

• ###### This attribute can be used when the parent element is smaller than the child element
• ###### Copy an element to realize the effect of running lantern cycle （ Cycle from bottom to top ）
• ###### utilize js Timer to achieve animation , When scrollTop Equal to the height of the child element ,scrollTop Set to 0

---

• Code implementation ：

html：

    <div class = 'testScroll' id="scrollBlock"> 
		<ul class="scrollItem" id="contentBlock">
			<li>  Running lights </li>
		</ul>
	</div>

css：

Set the child element slightly higher than the parent element , Parent element overflow:hidden Can achieve hidden effect

        ul li{
			list-style: none;
		}
		body{
			background-color: #f3f3f3
		}
		.testScroll{
			overflow: hidden;
			height: 4rem;
			background-color: #fff;
		}
		#contentBlock{
			margin-top: 0;
			margin-bottom: 0;
			
			height: 101%;
		}

JS：

function zMarquee(parentDom,childDom,speedParam,stayTime){
			if(parentDom && childDom){
				var parent = document.getElementById(parentDom);
				var child = document.getElementById(childDom);
				var childHeight = child.offsetHeight;	// Content height of running lamp 
				var speed = speedParam?speedParam:40;	// Running light speed 
				var timer = null;	
				var delay = stayTime?stayTime:1000;	// The default hold time is 
				parent.scrollTop = 1;
				parent.innerHTML += parent.innerHTML;
				var start_scroll = function(){
					timer = setInterval(scrollUp,speed);
					parent.scrollTop++;
				}
				var scrollUp = function(){
					if(Math.round(parent.scrollTop)%(childHeight*2)==0){
                        clearInterval(timer);
                        setTimeout(start_scroll,10);
                        parent.scrollTop = parent.scrollTop + 1;
                    }else{
						if(parent.scrollTop >= childHeight){
							parent.scrollTop = 0;
						}
						parent.scrollTop++;

					}
									
				}
				if(parent.offsetHeight < childHeight){
					start_scroll()
				}else{
					console.error("zMarquee throw a error ,parentDom's height is more than childDom's ")
				}

			}else{
				console.error('zMarquee Param illegal ！')
			}
		}
		zMarquee('scrollBlock','contentBlock',20)

Simple code , Simply encapsulates a method , Parameters are parent and child elements ID, The optional parameter is speed, It's not bad , Other methods can continue to enrich

github Address