js走马灯

最新推荐文章于 2024-07-18 11:39:42 发布
最新推荐文章于 2024-07-18 11:39:42 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： JS 文章标签： js走马灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010678947/article/details/39297225
版权

方法一：最简单，但是仅仅支持IE8及以上，火狐，谷歌

<marquee direction="up" scrollamount="1" style="width: 400x;height: 20px" id="">
        走马灯测试第一行！<br/>
        走马灯测试第二行！<br/>
        走马灯测试第三行！<br/>
        走马灯测试第四行！<br/>
        走马灯测试第五行！<br/>
</marquee>
方法二（1）：效果很好，但是没有停留效果： 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>走马灯</title> 
</head> 
<body>  
	<div id="demo" style="overflow:hidden;height:20px;width:400px;cursor:pointer; line-height:20px;"> 
		<div id="demo1"> 
			走马灯测试第一行！<br/>
		    走马灯测试第二行！<br/>
		    走马灯测试第三行！<br/>
		    走马灯测试第四行！<br/>
		    走马灯测试第五行！<br/>
		</div> 
		<div id="demo2"> </div> 
	</div> 
	<script> 
		var speed=80; 
		var stopTime=1;
		var demo2=document.getElementById("demo2"); 
		var demo1=document.getElementById("demo1"); 
		var demo=document.getElementById("demo"); 
		demo2.innerHTML=demo1.innerHTML; 
		var intFlag=1;
		function Marquee(){  
			if(demo2.offsetTop-demo.scrollTop<=0) {
				demo.scrollTop-=demo1.offsetHeight;  
			}
			else{ 
				demo.scrollTop++;  
			} 
			if (demo.scrollTop%20==0) {
				clearInterval(MyMar);
				for (var i = 1; i <= 1000000; i++) {
					intFlag++;
				};
				MyMar=setInterval(Marquee,speed);
				/*var nowOld = new Date();     
				var nowNew= new Date();   
				//var exitTime = now.getTime() + stopTime; 
				while (true) {   
					nowNew = new Date();   
					if (nowNew-nowOld > stopTime)    
					
				}   */
				
				//alert(intFlag);
			};
		} 
		var MyMar=setInterval(Marquee,speed); 
		demo.οnmοuseοver=function() {clearInterval(MyMar)} 
		demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
	</script>
</body> 
</html>
方法二（2）：横、纵都可以！： 

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无缝滚动</title> 
    <style type="text/css"> 
        img{ 
        border:0; 
        height:100px; width:150px; 
        } 
        td img{ 
        margin:0 10px; 
        } 
    </style> 
</head> 
<body> 
<!-- 纵向向无缝滚动--> 
    <div id="demo" style="overflow:hidden;height:350px;width:200px"> 
        <div id="demo1"> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a>
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a>
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a>
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a>
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a> 
            <a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a> 
        </div> 
        <div id="demo2"> 
        </div> 
    </div> 
    <script> 
        var speed=40; 
        var demo2=document.getElementById("demo2"); 
        var demo1=document.getElementById("demo1"); 
        var demo=document.getElementById("demo"); 
        demo2.innerHTML=demo1.innerHTML 
        function Marquee(){ 
        if(demo2.offsetTop-demo.scrollTop<=0) 
        demo.scrollTop-=demo1.offsetHeight; 
        else{ 
        demo.scrollTop++; 
        } 
        } 
        var MyMar=setInterval(Marquee,speed); 
        demo.οnmοuseοver=function() {clearInterval(MyMar)} 
        demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
    </script>
 
<!-- 横向无缝滚动--> 
    <div style="margin-top:20px;"> 
        <div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center> 
            <table border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
                <td id="scroll_begin"> 
                    <a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a>
                    <a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a>
                </td> 
                <td id="scroll_end"></td> 
            </tr> 
            </table> 
        </div>
    </div> 
    <script> 
        var speed1=40 
        var scroll_end = document.getElementById("scroll_end"); 
        var scroll_div = document.getElementById("scroll_div"); 
        scroll_end.innerHTML=scroll_begin.innerHTML 
        function Marquee1(){ 
            if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
                scroll_div.scrollLeft-=scroll_begin.offsetWidth 
            else{ 
                scroll_div.scrollLeft++ 
            } 
        } 
        var MyMar1=setInterval(Marquee1,speed1) 
        scroll_div.οnmοuseοver=function() {clearInterval(MyMar1)} 
        scroll_div.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed1)} 
    </script> 
</body> 
</html>
方法三：实现了效果还可以停留！ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>走马灯</title>  
</head>
<body>
<div id="announcement" style="width:400px; height:20px; line-height:20px; overflow: hidden;">
  <div id="announcementbody" style="overflow-y:hidden;line-height: 20px; height: 20px" >
    走马灯测试第一行！<br/>
    走马灯测试第二行！<br/>
    走马灯测试第三行！<br/>
    走马灯测试第四行！<br/>
    走马灯测试第五行！<br/> 
  </div>
</div>
<script type="text/javascript"> 
    var speed=10; 
    var anndelay = 1000;
    var anncount = 0;
    var annheight = 20;
    var annst = 0;
    var announcementbody=document.getElementById("announcementbody"); 
    var announcement=document.getElementById("announcement"); 
    function announcementScroll()
    {
       if(!annst)
       {
          announcementbody.innerHTML += announcementbody.innerHTML;
          announcementbody.scrollTop = 0;
          if(announcementbody.scrollHeight > annheight*3)
          {
             annst = setTimeout('announcementScroll()', anndelay);
          }
          else
          {
             announcement.onmouseover = announcement.onmouseout = null;
          }
          return;
       }
       if(anncount == annheight)
       {
          if(announcementbody.scrollHeight - annheight <= announcementbody.scrollTop)
          {
             announcementbody.scrollTop = announcementbody.scrollHeight / 2 - annheight;
          }
          anncount = 0;
          annst = setTimeout('announcementScroll()', anndelay);
       }
       else
       {
          announcementbody.scrollTop ++ ;
          anncount ++ ;
          annst = setTimeout('announcementScroll()', speed);
       }
    }
    announcementScroll(); 
    announcement.οnmοuseοver=function() {clearTimeout(annst);annst = 0;} 
    announcement.οnmοuseοut=function() {if(!annst) annst = setTimeout('announcementScroll()', anndelay);} 
</script>
</body>
</html>

方法四：图片走马灯

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>picture auto scroll</title>
</head>
  <style type="text/css">
    <!--
    body {
      text-align: center;
      margin: 0 auto;
    }

    TD {
      FONT-SIZE: 12px;
    }

    ul,li,img {
      padding: 0;
      margin: 0;
      border: 0;
      list-style: none;
    }

    ul {
      width: 168px;
      margin: 0 auto;
    }

    ul li {
      width: 49.8%;
      float: left;
      padding: 4px 0;
    }

    ul li img {
      width: 66px;
      height: 23px;
    }
  </style>
</head>
<body>
  <div style="margin: 5px; padding: 3px;">
  </div>
  <div id=link_logo
    style="OVERFLOW: hidden; margin: 0 auto; WIDTH: 160px; HEIGHT: 235px">
    <div id=link_logo1 style="OVERFLOW: hidden">

      <ul>
        <li><a href="#" target=_blank><img
            src="images/1.gif" alt="123" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/2.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/3.gif" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/4.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/5.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/6.gif" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/7.gif" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/8.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/9.gif" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/10.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/11.gif" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/12.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/13.gif" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/14.jpg" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/15.jpg" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/16.jpg" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/17.jpg" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/18.gif" /></a></li>
        <li><a href="#" target=_blank><img
            src="images/19.gif" alt="CSS" /></a></li>
        <li><a href="#" target=_blank><img
            alt="CSS" src="images/20.gif" /></a></li>
      </ul>
    </div>
    <div id=link_logo2></div>
  </div>
  <script>
    var speed = 65
    link_logo2.innerHTML = link_logo1.innerHTML
    function Marquee2() {
      if (link_logo2.offsetTop - link_logo.scrollTop <= 0)
        link_logo.scrollTop -= link_logo1.offsetHeight
      else {
        link_logo.scrollTop++
      }
    }
    var MyMar2 = setInterval(Marquee2, speed)
    link_logo.onmouseover = function() {
      clearInterval(MyMar2)
    }
    link_logo.onmouseout = function() {
      MyMar2 = setInterval(Marquee2, speed)
    }
  </script>
  <br>
  <br>
  <br> 
  <br>
</body>
</html>






开心就是最好
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mysql8.0.33的Linux编译安装文件
06-07
Linux系统下编译安装mysql8.0.33需要的文件
MySQL MHA 基础知识介绍
weixin_51614581的博客
02-19 610
MySQL MHAMySQL MHA1．什么是 MHA2．MHA 的组成3．MHA 的特点 MySQL MHA 1．什么是 MHA MHA（MasterHigh Availability）是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中，MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大程度上保证数据的一致性，以达到真正意义上的高可用。 2．MHA 的组成 MHA Node（数据节点）
Mysql8.0.38一主两从+MHA0.58（内网环境）
最新发布
A3160251508_的博客
07-18 995
本地仓库真的能省很多事情不止放mysql，所以按个人所好。
MySql安装过程中的错误及解决方法记录
qq_14945475的博客
08-09 1879
1. 错误： [root@localhost data]# /etc/init.d/mysqld start Starting MySQL... ERROR! The server quit without updating PID file (/usr/local/mysql/data/localhost.localdomain.pid). 错误日志显示Could not create unix socket lock file /var/lib/mysql/mysql .sock.lock.(ll.
Linux安装Mysql8，过程详细（离线安装mysql）
天青色等烟雨
05-30 2126
因公司需要，需要在服务器上安装一个mysql，但是机器没有外网权限，所以记录一下安装过程，供大家参考。
Linux系统安装通用MySQL-8.0.33，及主从配置
Rivennew的博客
05-29 1914
重新设置slave线程（需要获取另一台mysql的show master status;master_log_file='log-bin.000001', # master_log_file是File的值。# master_log_pos是Position的值。# 检查配置文件中的server_id是否生效。stop slave;# 停止有误的slave线程。6：如果有不同步的就执行如下操作（有误的mysql）
linux上mysql 8.0安装
vanillamba
08-30 600
mysql8.0的安装
MySQL MHA高可用架构搭建手册
02-21
MySQL MHA高可用架构搭建手册
MHA高可用架构搭建细节流程
08-26
本文将详细介绍MHA高可用架构搭建的细节流程，从搭建MySQL主从复制到MHA高可用实现故障转移。本文将涵盖MySQL主从复制的搭建、MHA高可用架构的搭建详细流程，并对相关的技术点进行了详细的解释。 一、环境和软件...
MySQL高可用架构MHA搭建和测试.docx
07-29
通过以上步骤，你可以成功地在Linux环境下搭建起一个MySQL高可用架构的MHA系统，并进行有效的测试验证。这样的架构能够大大提高MySQL服务的稳定性和容错能力，为业务的持续运行提供了保障。在实际生产环境中，还需要...
深入理解Mysql MHA高可用集群搭建：从实验到实战
12-28
《深入理解Mysql MHA高可用集群搭建：从实验到实战》 MySQL的高可用性是数据库系统稳定运行的关键，而MHA（Master High Availability）是实现这一目标的重要工具。MHA专注于处理MySQL主从复制架构中的主节点故障，...
MySQL高可用架构MHA 搭建测试文档_v1.docx
04-23
MHA（Master High Availability）是一种开源解决方案，专门用于管理MySQL主从复制集群的高可用性。配合Keepalived，可以实现快速故障切换和网络负载均衡，确保数据的一致性和服务的连续性。 ### MHA概述 MHA由...
Mysql8 MHA(完结)
2301_76957510的博客
05-30 896
MHA 提供快速切换和优雅的阻塞写入，这个切换过程只需要 0.5-2s 的时间，这段时间内数据是无法写入的。3.所有的show slave status的输出中Seconds_Behind_Master参数小于或者等于running_updates_limit秒，如果在切换过程中不指定running_updates_limit,那么默认情况下running_updates_limit为1秒。为了保证数据完全一致性，在最快的时间内完成切换，MHA的在线切换必须满足以下条件才会切换成功，否则会切换失败。
ubuntu 安装 mysql8，远程连接数据库（华为云、压缩包安装、问题解决）
MaoVazquez的博客
04-08 742
输入连接的配置信息，主机 ip 为公网 ip，点击连接测试没有问题。12. navicat 连接服务器 mysql。11. 开放服务器的3306端口。9. 登录 mysq，修改密码。添加规则，配置成这样点击确定。
Zabbix 学习（一）源码安装MySQL 8.0.33版本数据库
2301_79227925的博客
07-25 565
能够登陆，表示MySQL 8.0.33 搭建成功。
Could not create unix socket lock file /usr/local/mysql/mysql.sock.lock
lppl010_的专栏
12-03 9887
在日志文件/usr/local/mysql/error.log中可以看到具体的ERROR信息：Could not create unix socket lock file /usr/local/mysql/mysql.sock.lock。 这种错误一般都是目录不存在或者权限不足，所以我们直接使用命令mkdir -p /usr/local/mysql/创建该目录即可，然后可以设置目录权限...
mysql8.0使用MHA实现高可用
Fish_1112的博客
02-24 1271
mysql8.0使用MHA实现高可用
linux安装mysql-8.0.33正确方式及常见问题
天道酬勤
08-15 1955
mysql安装常见问题解决办法
MySQL8.0.16MHA0.58高可用方案
susu要快乐的博客
03-08 1388
linux版本 CentOS Linux release 7.9.2009 (Core) MHA版本 MHA 0.58 mysql版本 mysql8.0.16 MHA搭建 1.进入mysql服务，为所有节点创建mha管理用户 mysql -u root -p create user 'mhaadmin'@'192.168.200.%' identified with mysql_native_password by 'Lunz2017'; 2.为所建用户赋予权限 gran.
Mysql 5.7.22 MHA 高可用集群搭建指南
本文主要描述了在Centos 7.4系统上通过源码安装Mysql 5.7.22，搭建一主多从的高可用集群，并使用MHA（0.57）进行配置。下面对该过程进行了详细总结。 首先，在Mysql 5.7.22 MHA高可用集群架构中，通过简易架构图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值