本文共 1947 字,大约阅读时间需要 6 分钟。
一、HTML代码
二、CSS代码Scroll Text
body{ font-size:15px; font-family: 'Microsoft YaHei','微软雅黑','SimSun','宋体'; margin: 0px; padding: 0px; text-align: center;}a{ color:#666666; text-decoration: none; display: block; line-height: 1.5em;}a:hover{ color: #CC0000; text-decoration: none;}.news_root{ width: 255px; height: 134px; text-align: left; margin: 0 auto; border: 1px solid #ccc;}.news_header{ width: 243px; height: 16px; vertical-align: top; text-align: left; font-size: 14px; padding: 6px; background-color: #ccc;}#scrollContainer{ width: 245px; margin: 2px 5px; overflow: hidden; text-align: left;}三、Javascript代码
var stopscroll = false;var scrollContHeight = 95; //滚动区域的高度var scrollContWidth = 230; //滚动区域的宽度var scrollSpeed = 25; //滚动的速度,越小滚动越快var scrollContainer = document.getElementById("scrollContainer");var scrollContent = document.getElementById("scrollContent");do{ scrollContainer.appendChild(scrollContent.cloneNode(true));}while(scrollContainer.offsetHeight < scrollContHeight);scrollContainer.style.width = scrollContWidth+"px";scrollContainer.style.height = scrollContHeight+"px";scrollContainer.noWrap = true;//添加事件:鼠标经过,停止滚动;鼠标离开,继续滚动scrollContainer.onmouseover = new Function("stopscroll = true");scrollContainer.onmouseout = new Function("stopscroll = false");function init(){ scrollContainer.scrollTop = 0; setInterval(scrollUp,scrollSpeed);}init();var currTop = 0;function scrollUp(){ if(stopscroll == true) return; currTop = scrollContainer.scrollTop; scrollContainer.scrollTop += 1; if(currTop == scrollContainer.scrollTop) { scrollContainer.scrollTop = 0; scrollContainer.scrollTop += 1; }}
转载地址:http://uevgi.baihongyu.com/