JavaScript实现竖直文本滚动

来源：互联网发布：java调matlab 编辑：程序博客网时间：2024/06/05 10:45

一、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>Scroll Text</title><link rel="stylesheet" type="text/css" href="scrollText.css"></head><body><div class="news_root"><div class="news_header">HeaderLine</div><div id="scrollContainer"><div id="scrollContent"><a href="#">w3c has released html5</a><a href="#">w3c has released css3</a><a href="#">w3c has released ecmasript5</a><a href="#">w3c has released ria</a><a href="#">w3c has released html5 bom</a><a href="#">w3c has released ria</a><a href="#">w3c has released html5 bom</a></div></div></div><script type="text/javascript" src="scrollText.js"></script></body></html>

二、CSS代码

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;}}

0 0