- JScript code
[align=center]
<!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=gb2312" />
<title>无标题文档</title>
<style>
#ul1 {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}
li {border-bottom:1px dashed #CCC; padding:15px 10px 3px 10px; margin:0px; list-style:none;}
</style>
<script type="text/javascript">
var arr=['洗脸也能抽筋？？', '好冷啊', '一口气睇晒 《碟影重重》三部，头痛痛。一如既往地喜欢特务男，哈哈，有脑有身手', '我靠近你，不是因为你什么都好，不是因为你能给我一个安心而不错的未来，不是因为你是我的老公，不是因为我觉得我们肯定这一辈子会这样好好走下去，不是因为再找一段感情代价太大，而是因为，我爱你，我觉得看到你，就会心动。', '我承认我是个没有鼓励就没有动力的人，缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间，全是梦想，家庭和朋友。'];
var t=setInterval(function(){
var sTxt=arr.shift();
createDom(sTxt);
arr.push(sTxt);
},2000)
var bPause=false;
function startMove(obj,attr,iTarget,fnMoveEnd)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function(){
if(bPause)
{
return;
}
doMove(obj,attr,iTarget,fnMoveEnd);
},30)
};
function getAttr(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return document.defaultView.getComputedStyle(obj,false)[attr];
}
}
function doMove(obj,attr,iTarget,fnMoveEnd)
{
var iSpeed=0;
var weizhi=0;
if(attr=="opacity")
{
weizhi=parseFloat(getAttr(obj,"opacity"));
}
else
{
weizhi=parseFloat(getAttr(obj,attr))
}
if(Math.abs(iTarget-weizhi)<1/100)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnMoveEnd)
{
fnMoveEnd();
}
}
else
{
iSpeed=(iTarget-weizhi)/8;
if(attr=="opacity")
{
obj.style.filter="alpha(opacity:"+(weizhi+iSpeed)*100+")";
obj.style.opacity=weizhi+iSpeed;
}
else
{
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
obj.style[attr]=weizhi+iSpeed+"px";
}
}
};
function leaveMessage()
{
var oText=document.getElementById("txt1");
createDom(oText.value);
oText.value="";
};
function createDom(sTxt)
{
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var oLi=document.createElement("li");
var iHeight=0;
oLi.innerHTML=sTxt;
oLi.style.filter="alpha(opacity:0)";
oLi.style.opacity=0;
if(aLi.length)
{
oUl.insertBefore(oLi,aLi[0])
}
else
{
oUl.appendChild(oLi)
}
//开始运动
iHeight=oLi.offsetHeight;
oLi.style.height="0px";
oLi.style.overflow='hidden';
startMove(oLi,"height",iHeight,function(){
startMove(oLi,"opacity",1)
})
oUl.onmouseover=function()
{
bPause=true;
};
oUl.onmouseout=function()
{
bPause=false;
}
};
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>
[/align]
为什么以上代码在将鼠标放上去的时候Bug就出现了，鼠标放上去，文字就没出现了，然后就是一大截空白的，给客户的体验非常不友好，移开鼠标又有了，牛人们，能给个解析吗? 怎么解决以上问题呢? 能帮忙改善上面的代码吗?
牛人们，以上代码就是想模仿新浪微博的那种效果，也就是文字向下滚动的效果，类似于时刻在刷新消息般。
或者牛人们有这种效果的代码，大家可以分享分享。代码量越少越好。
在线等！效果出来了，立马结贴。
------解决方案--------------------
- HTML code
<!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=gb2312" />
<title>无标题文档</title>
<style>
#ul1
{
background: white;
margin: 0px;
padding: 0px;
width: 500px;
height: 300px;
border: 1px solid black;
overflow: hidden;
}
li
{
border-bottom: 1px dashed #CCC;
padding: 15px 10px 3px 10px;
margin: 0px;
list-style: none;
}
</style>
<script type="text/javascript">
var arr = ['洗脸也能抽筋？？', '好冷啊', '一口气睇晒 《碟影重重》三部，头痛痛。一如既往地喜欢特务男，哈哈，有脑有身手', '我靠近你，不是因为你什么都好，不是因为你能给我一个安心而不错的未来，不是因为你是我的老公，不是因为我觉得我们肯定这一辈子会这样好好走下去，不是因为再找一段感情代价太大，而是因为，我爱你，我觉得看到你，就会心动。', '我承认我是个没有鼓励就没有动力的人，缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间，全是梦想，家庭和朋友。'];
var t = setInterval(f_timer, 2000);
function f_timer() {
var sTxt = arr.shift();
createDom(sTxt);
arr.push(sTxt);
}
var bPause = false;
var isCancel = false;
function startMove(obj, attr, iTarget, fnMoveEnd) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
if (bPause) {
clearInterval(t);
isCancel = true;
return;
} else {
if (isCancel)
{ t = setInterval(f_timer, 2000); isCancel = false; }
}
doMove(obj, attr, iTarget, fnMoveEnd);
}, 30)
};
function getAttr(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return document.defaultView.getComputedStyle(obj, false)[attr];
}
}
function doMove(obj, attr, iTarget, fnMoveEnd) {
var iSpeed = 0;
var weizhi = 0;
if (attr == "opacity") {
weizhi = parseFloat(getAttr(obj, "opacity"));
}
else {
weizhi = parseFloat(getAttr(obj, attr))
}
if (Math.abs(iTarget - weizhi) < 1 / 100) {
clearInterval(obj.timer);
obj.timer = null;
if (fnMoveEnd) {
fnMoveEnd();
}
}
else {
iSpeed = (iTarget - weizhi) / 8;
if (attr == "opacity") {
obj.style.filter = "alpha(opacity:" + (weizhi + iSpeed) * 100 + ")";
obj.style.opacity = weizhi + iSpeed;
}
else {
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style[attr] = weizhi + iSpeed + "px";
}
}
};
function leaveMessage() {
var oText = document.getElementById("txt1");
createDom(oText.value);
oText.value = "";
};
function createDom(sTxt) {
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var oLi = document.createElement("li");
var iHeight = 50;
oLi.innerHTML = sTxt;
oLi.style.filter = "alpha(opacity:0)";
oLi.style.opacity = 0;
if (aLi.length) {
oUl.insertBefore(oLi, aLi[0]);
}
else {
oUl.appendChild(oLi);
}
//开始运动
iHeight = oLi.offsetHeight;
oLi.style.height = "50px";
oLi.style.overflow = 'hidden';
startMove(oLi, "height", iHeight, function() {
startMove(oLi, "opacity", 1)
})
oUl.onmouseover = function() {
bPause = true;
};
oUl.onmouseout = function() {
bPause = false;
}
};
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
</html>