热点新闻滚动(文字单行向上滚动)特效的代码

gaosc 技术 2019-09-20 6561 0 JavaScript jQuery

我们在很多大型门户网站都会有看到有些一热点新闻都会一直向上滚动，下面我就来给大家推荐一款Javascript中热点新闻滚动特效代码，有需要了解的朋友可以参考一下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .bady{margin:0;padding:0;font-size:12px; font-family:Arial "宋体";}
        div,input,dl,dd,dt,ul,li,p,h1,h2,h3,h4,h5,h6,p,fieldset{margin:0; padding:0;}
        ul,li{ list-style:none;}
        img,input{ border:none;}
        a{ text-decoration:none;}
        .maintopm{width:485px;height:22px;float:left;border:#D0D0D0 1px solid;padding-left:4px;overflow:hidden; background:#FFF;padding-top:7px;}
        .maintopm a{ display:block;width:485px;height:22px;color:#555656;line-height:20px;font-size:12px;}
        .maintopm a:hover{color:#F00;}
        #div1{height:22px;overflow:hidden;}
    </style>
</head>
<body>
<div class="maintopm">
<div id="div1">
<a href="javascript:">单行文字向上滚动特效兼容多种浏览器</a>
<a href="javascript:">文字向上滚动特效兼容多种浏览器</a>
<a href="javascript:">文字向上滚动兼容各种浏览器</a>
<a href="javascript:">非常好的文字向上滚动代码</a>
<a href="javascript:">单行文字向上滚动特效兼容多种浏览器</a>
<a href="javascript:">单行文字向上滚动特效兼容2019-09-20</a>
</div>
</div>
<script>
var box=document.getElementById("div1"),can=true;
box.innerHTML+=box.innerHTML;
box.onmouseover=function(){can=false};
box.onmouseout=function(){can=true};
new function (){
var stop=box.scrollTop%22==0&&!can;
if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++;
setTimeout(arguments.callee,box.scrollTop%22?10:1500);
};
</script>
</body>
</html>

打赏