在做广东省互联网协会官网时,产品经理要求实现这样一个需求:有一首会长写的小诗,希望在首页的一个区域内,无限轮播这首诗。
轮播小诗
页面结构
这里是五彩缤纷、群芳争妍的世界!
这里是e光谱照、人潮似海的网络爱好者的乐园!
一切网络经济的困惑将在这里烟消云散,豁然开朗;
一切陈旧的企业经营观念将在这里被网络新潮濯涤殆尽。
应该摒弃的,从此摒弃!
早该到来的,正在到来!
在这"科技无限、网络无界"的时空中遨游:
你将认知和被认知,你将熟识和被熟识。
她是Internet精英翱翔之天宇,
是网络新人摘桂之阶梯;
她不仅打上了千百万网民悠缠之情结,
她更为商海卓识者酝酿着无限商机!
原生JS部分
var area = document.getElementById('poemCon');
area.scrollTop = 0;
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function scrollUp () {
if ( area.scrollTop >= con1.offsetHeight ) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var timer=setInterval(scrollUp,50);
area.onmouseover = function () {
clearInterval (timer);
}
area.onmouseout=function(){
timer=setInterval (scrollUp , 50);
}
关键点为: 复制一份小诗内容到con2, 以及scrollTop 与 offsetHeight。