asp.net字幕滚动

零度F 2011-07-26 08:36:43

请各位高手指教一下我的这段代码在运行的时候为什么会闪动啊有什么办法可以解决吗

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="shiyanaspx.aspx.cs" Inherits="shiyanaspx" %>

<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<style type="text/css">
*{padding:0; margin:0;}
#roll{ border:1px solid red;height:100px; margin:10px auto; width:350px; overflow:hidden;list-style:none;}
#roll li{height:30px; padding-left:10px;line-height:30px; border-bottom:1px solid #ddd;}
a{font-size:12px; text-decoration:none; font-family:'宋体';}
</style>

</head>
<ol id="roll">
<li>
<a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="StudentLogin.aspx">
超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li>
<li>
<a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm">
CSS制作斜角上有背景图片的Div层</a></li>
<li>
<a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm">
Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li>
<li>
<a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm">
DIV始终固定在网页右下角位置的CSS实现方法</a></li>
<li>
<a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm">
JavaScript未知高度元素的垂直居中的方法</a></li>
<li>
<a title="渐变彩色的文字" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1056.htm">
渐变彩色的文字</a></li>
<li>
<a title="指定文字逐条显示" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1055.htm">
指定文字逐条显示</a></li>
<li>
<a title="滚动的标题栏" target="_blank" href="http://www.csrcode.cn/html/txdm/qtdm/1054.htm">
滚动的标题栏</a></li>
<li>
<a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1036.htm">
JS 4屏平滑滚动幻灯片特效</a></li>
<li>
<a title="图片的无缝滚动（纵向、横向）" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1035.htm">
图片的无缝滚动（纵向、横向）</a></li>
<li>
<a title="鼠标触及带边框的菜单" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1034.htm">
鼠标触及带边框的菜单</a></li>
<li>
<a title="比较实用的CSS控制链接颜色效果" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1032.htm">
比较实用的CSS控制链接颜色效果</a></li>
</ol>
<div id="bug"></div>
</body>
<script type="text/javascript">
(function(A){
function _ROLL(obj){
this.ele = document.getElementById(obj);
this.interval = false;
this.currentNode = 0;
this.passNode = 0;
this.speed = 100;
this.childs = _childs(this.ele);
this.childHeight = parseInt(_style(this.childs[0])['height']);
addEvent(this.ele,'mouseover',function(){
window._loveYR.pause();
});
addEvent(this.ele,'mouseout',function(){
window._loveYR.start(_loveYR.speed);
});
}
function _style(obj){
return obj.currentStyle || document.defaultView.getComputedStyle(obj,null);
}
function _childs(obj){
var childs = [];
for(var i=0;i<obj.childNodes.length;i++){
var _this = obj.childNodes[i];
if(_this.nodeType===1){
childs.push(_this);
}
}
return childs;
}
function addEvent(elem,evt,func){
if(-[1,]){
elem.addEventListener(evt,func,false);
}else{
elem.attachEvent('on'+evt,func);
};
}
function innerest(elem){
var c = elem;
while(c.childNodes.item(0).nodeType==1){
c = c.childNodes.item(0);
}
return c;
}
_ROLL.prototype = {
start:function(s){
var _this = this;
_this.speed = s || 100;
_this.interval = setInterval(function(){
_this.ele.scrollTop += 1;
_this.passNode++;
if(_this.passNode%_this.childHeight==0){
var o = _this.childs[_this.currentNode] || _this.childs[0];
_this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0;
_this.passNode = 0;
_this.ele.scrollTop = 0;
_this.ele.appendChild(o);
}
},_this.speed);
},
pause:function(){
var _this = this;
clearInterval(_this.interval);
}
}
A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;}
})(window);
marqueen('roll').start(100/*速度默认100*/);
</script>

</html>

...全文

419 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

子夜__ 2011-07-27

打赏
举报

跑马灯效果

MSDNXGH 2011-07-26

打赏
举报

太长了，就不看了，最简单滚动效果，marquee标签，查度一下marquee标签吧

零度F 2011-07-26

打赏
举报

开玩笑啊我的那段时为了让它循环滚动的去掉了怎么滚动啊

一一一一 2011-07-26

打赏
举报

把这段去掉
<script type="text/javascript">
(function(A){
function _ROLL(obj){
this.ele = document.getElementById(obj);
this.interval = false;
this.currentNode = 0;
this.passNode = 0;
this.speed = 100;
this.childs = _childs(this.ele);
this.childHeight = parseInt(_style(this.childs[0])['height']);
addEvent(this.ele,'mouseover',function(){
window._loveYR.pause();
});
addEvent(this.ele,'mouseout',function(){
window._loveYR.start(_loveYR.speed);
});
}
function _style(obj){
return obj.currentStyle || document.defaultView.getComputedStyle(obj,null);
}
function _childs(obj){
var childs = [];
for(var i=0;i<obj.childNodes.length;i++){
var _this = obj.childNodes[i];
if(_this.nodeType===1){
childs.push(_this);
}
}
return childs;
}
function addEvent(elem,evt,func){
if(-[1,]){
elem.addEventListener(evt,func,false);
}else{
elem.attachEvent('on'+evt,func);
};
}
function innerest(elem){
var c = elem;
while(c.childNodes.item(0).nodeType==1){
c = c.childNodes.item(0);
}
return c;
}
_ROLL.prototype = {
start:function(s){
var _this = this;
_this.speed = s || 100;
_this.interval = setInterval(function(){
_this.ele.scrollTop += 1;
_this.passNode++;
if(_this.passNode%_this.childHeight==0){
var o = _this.childs[_this.currentNode] || _this.childs[0];
_this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0;
_this.passNode = 0;
_this.ele.scrollTop = 0;
_this.ele.appendChild(o);
}
},_this.speed);
},
pause:function(){
var _this = this;
clearInterval(_this.interval);
}
}
A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;}
})(window);
marqueen('roll').start(100/*速度默认100*/);
</script>