一个使用htc来实现的连续滚动公告栏
写了很久了,一直没有优化过。
调用的HTML代码:
<DIV CLASS="ScrollViewDiv" ID="ScrollViewDiv">内容在这里。。。。。。 </DIV>
CSS代码
.ScrollViewDiv {
overflow : hidden;
height : 55px;
width : 100%;
behavior : url(ScrollViewDiv.htc);
}
overflow : hidden;
height : 55px;
width : 100%;
behavior : url(ScrollViewDiv.htc);
}
ScrollViewDiv.htc
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="MouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="MouseOut()" />
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="Init()" />
<PUBLIC:PROPERTY name="content" id="_innerHtmlID" GET="getContent" PUT="setContent" />
<PUBLIC:PROPERTY NAME="delayTime" ID="_delayTimeID" GET="getDelayTime" PUT="setDelayTime" />
<PUBLIC:PROPERTY NAME="step" ID="_stepID" GET="getStep" PUT="setStep" />
<SCRIPT LANGUAGE="javascript"><!--
var _innerHTML = "";
var _delayTime = 300;
var _step = 1;
var _div1;
var _div2;
var _continueScroll = true;
function Init()
{
if (_innerHTML == "")
{
_innerHTML = innerHTML;
}
innerHTML = "";
_div1 = document.createElement("DIV");
_div2 = document.createElement("DIV");
appendChild(_div1);
appendChild(_div2);
if (_innerHTML == "")
{
_div1.innerHTML = " ";
_div2.innerHTML = " ";
}
else
{
_div1.innerHTML = _innerHTML;
_div2.innerHTML = _innerHTML;
}
RollUp();
}
function RollUp()
{
if (_continueScroll)
{
if (_div1.scrollHeight <= offsetHeight)
{
//高度小于实际高度时不滚动
_div2.style.display = "none";
scrollTop = 0;
}
else
{
_div2.style.display = "";
if(_div2.offsetTop - scrollTop <= 0)
{
scrollTop -= _div1.offsetHeight;
}
else
{
scrollTop ++;
}
}
}
window.setTimeout(RollUp , _delayTime);
}
function getContent()
{
return _innerHTML;
}
function setContent(value)
{
_innerHTML = value;
try
{
if (_innerHTML == "")
{
_div1.innerHTML = " ";
_div2.innerHTML = " ";
}
else
{
_div1.innerHTML = _innerHTML;
_div2.innerHTML = _innerHTML;
}
}
catch (e)
{
}
}
function getDelayTime()
{
return _delayTime;
}
function setDelayTime(value)
{
try
{
_delayTime = parseInt(value , 10);
if (_delayTime <= 20)
{
_delayTime = 20;
}
}
catch (e)
{
}
}
function getStep()
{
return _step;
}
function setStep(value)
{
_step = value;
}
function MouseOver()
{
try
{
_continueScroll = false;
}
catch (e)
{
}
}
function MouseOut()
{
try
{
_continueScroll = true;
}
catch (e)
{
}
}
//--></SCRIPT>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="MouseOut()" />
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="Init()" />
<PUBLIC:PROPERTY name="content" id="_innerHtmlID" GET="getContent" PUT="setContent" />
<PUBLIC:PROPERTY NAME="delayTime" ID="_delayTimeID" GET="getDelayTime" PUT="setDelayTime" />
<PUBLIC:PROPERTY NAME="step" ID="_stepID" GET="getStep" PUT="setStep" />
<SCRIPT LANGUAGE="javascript"><!--
var _innerHTML = "";
var _delayTime = 300;
var _step = 1;
var _div1;
var _div2;
var _continueScroll = true;
function Init()
{
if (_innerHTML == "")
{
_innerHTML = innerHTML;
}
innerHTML = "";
_div1 = document.createElement("DIV");
_div2 = document.createElement("DIV");
appendChild(_div1);
appendChild(_div2);
if (_innerHTML == "")
{
_div1.innerHTML = " ";
_div2.innerHTML = " ";
}
else
{
_div1.innerHTML = _innerHTML;
_div2.innerHTML = _innerHTML;
}
RollUp();
}
function RollUp()
{
if (_continueScroll)
{
if (_div1.scrollHeight <= offsetHeight)
{
//高度小于实际高度时不滚动
_div2.style.display = "none";
scrollTop = 0;
}
else
{
_div2.style.display = "";
if(_div2.offsetTop - scrollTop <= 0)
{
scrollTop -= _div1.offsetHeight;
}
else
{
scrollTop ++;
}
}
}
window.setTimeout(RollUp , _delayTime);
}
function getContent()
{
return _innerHTML;
}
function setContent(value)
{
_innerHTML = value;
try
{
if (_innerHTML == "")
{
_div1.innerHTML = " ";
_div2.innerHTML = " ";
}
else
{
_div1.innerHTML = _innerHTML;
_div2.innerHTML = _innerHTML;
}
}
catch (e)
{
}
}
function getDelayTime()
{
return _delayTime;
}
function setDelayTime(value)
{
try
{
_delayTime = parseInt(value , 10);
if (_delayTime <= 20)
{
_delayTime = 20;
}
}
catch (e)
{
}
}
function getStep()
{
return _step;
}
function setStep(value)
{
_step = value;
}
function MouseOver()
{
try
{
_continueScroll = false;
}
catch (e)
{
}
}
function MouseOut()
{
try
{
_continueScroll = true;
}
catch (e)
{
}
}
//--></SCRIPT>