js走马灯

最新推荐文章于 2024-11-21 14:45:35 发布
最新推荐文章于 2024-11-21 14:45:35 发布
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： js走马灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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.onmouseover=function() {clearInterval(MyMar)} 
		demo.onmouseout=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.onmouseover=function() {clearInterval(MyMar)} 
        demo.onmouseout=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.onmouseover=function() {clearInterval(MyMar1)} 
        scroll_div.onmouseout=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.onmouseover=function() {clearTimeout(annst);annst = 0;} 
    announcement.onmouseout=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>






JS跑马灯
拥抱AI Design
02-28 906
本文主要介绍js跑马灯，适用于限制标题超出滚动，调整滚动时间。 方法 // 跑马灯 titleScroll() { if (this.goodsInfo.dclGoodsCname.length>20) { let title = this.goodsInfo.dclGoodsCname console.log(this.goodsInfo.dclGoodsCname.length) let fristchar = title.charAt(0); //在从中取第一个字符；(char.
JS走马灯效果案例
weixin_53798158的博客
11-12 283
【代码】JS走马灯效果案例。
javascript实现走马灯功能
12-27
走马灯,js特效，网页特效代码，JS教程，javascript
跑马灯（走马灯）的js实现
xiaojing的博客
12-05 1万+
这个跑马灯的实现思路其实跟轮播无缝连接的思路是一样的。实现的效果如下(这个软件的水印真的好明显，小小字在跑的就是跑马灯了=.=)： 跑马灯的样式和html <div class="notice-container"> <span class="notice-icon"></span> <div class="notice-item...
js实现走马灯效果
z13903931414的博客
01-22 1874
走马灯效果通常指的是一种文本或图片在页面上循环滚动的效果。在JavaScript中，我们可以使用定时器（如。这样，你就有了一个简单的走马灯效果。当然，你可以根据需要进行进一步的样式和功能调整。为了确保在所有浏览器中都能正常工作，可以使用。：页面加载完成后，自动调用。
Swiper走马灯资源压缩包
05-22
这个文件可能包含HTML、CSS和JavaScript代码，用于演示如何在项目中集成Swiper并实现走马灯效果。使用这个资源时，你需要将这些文件部署到你的Web服务器上，然后根据实际需求调整代码。 在实际应用Swiper时，你需要...
js 走马灯简单实例
12-02
这个简单的走马灯实例展示了如何利用JavaScript操作DOM元素（这里是`document.title`）以及如何使用定时器来实现动态效果。虽然实际应用中可能需要更复杂的设计来处理更丰富的内容和样式，但这个基本示例为初学者...
javascript 走马灯效果的链接提示
01-19
从提供的文件信息中，我们可以提炼出与“javascript 走马灯效果的链接提示”相关联的知识点，这些知识点主要围绕如何在网页中实现动态的走马灯效果以及通过链接提示与用户交互。以下是对这些知识点的详细解释： 1. ...
js走马灯，完整代码
qq_41892764的博客
06-03 725
【代码】js走马灯，完整代码。
js实现跑马灯
12-06
一个使用js脚本制作的跑马灯效果。s做的一个抽奖demo,有加速和减速效果。开始前先获取中奖号吗，效果结束时自动选中。
走马灯JavaScript
12-14
一个简单的走马灯JS
用javascript实现的跑马灯控件，文字跑马灯或图片跑马灯皆可噢！
09-27
自己用js实现的一个跑马灯控件，通过传入参数对象实例化它，然后启动即可。支持的参数有 div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
JS 跑马灯效果实现（很好用）
热门推荐
yangsen251024的专栏
02-26 5万+
实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。 好用之处在于： 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码，如果看不懂，可以跑这个列子 文字1 文字2 文字3 文字4 文字5 function test() { $("#RunTopic").find("li:first").appendTo(
js 跑马灯
weixin_42291794的博客
10-19 306
跑马灯：Marquee github地址：https://github.com/aamirafridi/jQuery.Marquee <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>test</title&gt
前端学习（188）:浏览器内核和浏览器前缀
歌谣的博客
12-23 342
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
js制作文字走马灯
最新发布
BANaanaa的博客
11-21 377
 走马灯是一种常见的网页效果，可以用来展示图片或文字的循环滚动。
js实现走马灯效果（无缝衔接）
normol的博客
09-04 3万+
需要注意的是，scrollLeft属性只有当他内部元素超出父级元素时才有效，否则将一直为0， 可以将scrollLeft想象成有横向的滚动条， 而scrollLeft++则相当于将滚动条向右拖动，当拖动到展示内容实际宽度后（需要另一个与展示内容相同的区域，否则一轮左移完成后会出现留白），需要恢复为0<!DOCTYPE html> <html lang="en"> <head> <meta
Javascript 走马灯
{ focus : web }
10-19 291
第一种：String 直接操作   &lt;HTML&gt; &lt;Head&gt; &lt;script&gt; var msg="这是一个足跑马灯效果的JAVASCRIPT文档"; //定义了要显示的效果的字符 var interval=100; //定义了每个字符的显示间隔时间 var spacelen=100; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值