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

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

醉清风2019-09-20技术7453

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

相关文章

Nginx单个以及多域名负载均衡配置

Nginx单个以及多域名负载均衡配置

Nginx负载均衡设置环境:负载均衡:192.168.188.128:80Web1:192.168.188.129:80Web2:192.168.188.130:80正式环境中,需要解析域名www.n...

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

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

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

laravel5.4总结--文件上传

laravel5.4总结--文件上传

1 配置文件系统的配置文件在 config/filesystems.php 文件中,此处我们新建一个uploads本地磁盘空间用于存储上传的文件,具体配置项及说明如下:<?php return...

laravel ci TP3 TP5各个php开发框架的优缺点

laravel ci TP3 TP5各个php开发框架的优缺点

   laravel的优缺点:    【优点】:     1. 代码简洁优雅 &nbs...

10 个实战与面试【常用 Shell 脚本】编写

10 个实战与面试【常用 Shell 脚本】编写

注意事项1)开头加解释器:#!/bin/bash2)语法缩进,使用四个空格;多加注释说明。3)命名建议规则:变量名大写、局部变量小写,函数名小写,名字体现出实际作用。4)默认变量是全局的,在函数中变量...