首页 技术正文

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

gaosc 技术 2019-09-20 116 0 JavaScriptjQueryhtml

我们在很多大型门户网站都会有看到有些一热点新闻都会一直向上滚动,下面我就来给大家推荐一款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>


打赏 支付宝打赏 微信打赏
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

Music