公司最近项目又多了起来,改版的改版,更新的更新,迭代的迭代,团队内部气氛也紧张了起来。由于项目排期紧,大家也都争分夺秒的干,在这里,小小的提醒自己一下:注意自己的身体。
项目中有一个标题上线轮播的小效果,以前见得多,心里也有小小的思路,现在项目遇到了,就实际动手干一干。废话不多说先看设计效果,类似于淘宝和京东上首页标题上下轮播。
就是上面这个头条新闻右侧的轮播。
废话还是不多说,再上代码。(代码写的简化了些,方便看懂,当然你可以直接引用,只不过就是样式的区别了)
<!--HTML--> <div class="box" id="box"> <ul id="list"> <li><a href="">1.这是第一条新闻</a></li> <li><a href="">2.这是第二条新闻</a></li> <li><a href="">3.这是第三条新闻</a></li> <li><a href="">4.这是第四条新闻</a></li> <li><a href="">5.这是第五条新闻</a></li> <li><a href="">6.这是第二条新闻</a></li> <li><a href="">7.这是第三条新闻</a></li> <li><a href="">8.这是第四条新闻</a></li> <li><a href="">9.这是第五条新闻</a></li> </ul> </div>
/*css*/ *{margin:0;padding:0;} ul{list-style:none;} .box{ width:200px; height:30px; background-color:#f1f1f1; margin:100px auto; overflow: hidden; } .box ul li{ height:30px; text-align:center; line-height:30px; }
/*javascript*/ function getStyle(element,attr){ if(element.currentStyle){ return element.currentStyle[attr]; }else{ return getComputedStyle(element,false)[attr]; } } var scroll = { mt:0, //初始移动距离 moveDuration:30, //移动间隔 stopDuration:4000, //停止间隔 init:function(){ var list = document.getElementById("list"), li = list.getElementsByTagName("li")[0], firstLi = list.children[0].cloneNode(true), liHeight = parseInt(getStyle(li ,"height")), liLen = list.children.length, mtTotal = liHeight*liLen; list.appendChild(firstLi) setInterval(function(){ var timer = setInterval(function(){ scroll.mt-=1; if(scroll.mt == -mtTotal){ scroll.mt = 0; } list.style.marginTop = scroll.mt+"px"; if(scroll.mt%liHeight == 0){ clearInterval(timer); } },scroll.moveDuration) },scroll.stopDuration) } } window.onload = function(){ scroll.init() }
getStyle()这是自己封装的一个函数,用于获取元素非行间样式,做了一点兼容性调整。
moveDuration:这个字段用于控制一次轮播滚动的速度
stopDuration:这个字段用于控制一轮播滚动间隔的时间。
简单写了写,当然项目中如果实际应用,如果考虑到性能的话,还需要做一些性能上的优化。不过,应对一般情况,显然是够用了。