当前位置:首页 > 技术 > 正文内容

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

醉清风2019-09-20技术7181

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


扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由红柚酱发布,如需转载请注明出处。

转载请注明出处:https://www.notenet.cn/post/91.html

相关文章

php-fpm进程数管理

php-fpm进程数管理

PHP-FPM先来了解一些名词概念:CGI是Common Gateway Interface(通用网管协议),用于让交互程序和Web服务器通信的协议。它负责处理URL的请求,启动一个进程,将客户端发送...

QueryList之flatten方法

QueryList之flatten方法

QueryList返回的集合数据均为Collection集合对象而非普通数组,目的就是为了方便处理采集结果数据。如果我们想要的结果是一位数组,而非二位数组,那该怎么做呢?可以使用flatten()方法...

Linux 服务器性能出问题,排查下这些参数指标

Linux 服务器性能出问题,排查下这些参数指标

一个基于 Linux 操作系统的服务器运行的同时,也会表征出各种各样参数信息。通常来说运维人员、系统管理员会对这些数据会极为敏感,但是这些参数对于开发者来说也十分重要,尤其当你的程序非正常工作的时候,...

使用Mysqldump进行逻辑备份

使用Mysqldump进行逻辑备份

mysqldump作为重要的MySQL备份工具,功能相当强大。备份参数、恢复策略,需要仔细研究。备份数据库:备份单个数据库或单个数据库中的指定表:mysqldump [OPTIONS] databas...

nginx如何根据http_referer实现跳转或屏蔽?

nginx如何根据http_referer实现跳转或屏蔽?

1、根据特定的 http_referer 实现跳转在配置文件的 server {} 中加入如下配置:if ($http_referer ~* “www.baidu...