js跑马灯效果大全

最新推荐文章于 2024-06-03 20:03:03 发布
最新推荐文章于 2024-06-03 20:03:03 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haining711/article/details/8717028
版权

图片跑马灯滚动大全：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="js滚动合集" />
<meta name="description" content="js滚动合集" />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="js滚动合集。All Rights Reserved" />
<title>js滚动合集 - http://www.nanvba.com/</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
    var speed=30;
    var demo=document.getElementById(d1); 
    var demo1=document.getElementById(d2); 
    var demo2=document.getElementById(d3);
    demo2.innerHTML=demo1.innerHTML;
    function boxTop(){
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
            else{demo.scrollTop++}
        }
    function boxRight(){
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
            else{demo.scrollLeft--}
        }
    function boxBottom(){ 
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
            else{demo.scrollTop--}
        }
    function boxLeft(){
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
            else{demo.scrollLeft++}
        }
    if(e==1){
            var MoveTop=setInterval(boxTop,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveTop);}
            demo.οnmοuseοut=function(){MoveTop=setInterval(boxTop,speed)}
        }
    if(e==2){
            var MoveRight=setInterval(boxRight,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveRight)}
            demo.οnmοuseοut=function(){MoveRight=setInterval(boxRight,speed)}
        }
    if(e==3){
            var MoveBottom=setInterval(boxBottom,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveBottom);}
            demo.οnmοuseοut=function(){MoveBottom=setInterval(boxBottom,speed)}
        }
    if(e==4){
            var MoveLeft=setInterval(boxLeft,speed)
            demo.οnmοuseοver=function(){clearInterval(MoveLeft)}
            demo.οnmοuseοut=function(){MoveLeft=setInterval(boxLeft,speed)}
        }
    if(e=="top"){
            MoveTop=setInterval(boxTop,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveTop);}
        }
    if(e=="right"){
            MoveRight=setInterval(boxRight,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveRight);}
        }
    if(e=="bottom"){
            MoveBottom=setInterval(boxBottom,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveBottom);}
        }
    if(e=="left"){
            MoveLeft=setInterval(boxLeft,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveLeft);}
        }
    }    
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />

<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:290px;"> 
<div id="a1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />  
</div> 
<div id="a2"></div>
</div> 
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>


<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;"> 
<div id="b1">
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />   
</div> 
<div id="b2"></div>
</div> 
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>

<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;"> 
<div id="c1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />   
</div> 
<div id="c2"></div>
</div> 
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>

<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;"> 
<div id="d1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />   
</div> 
<div id="d2"></div>
</div> 
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>

<h2>手动滚动 - <strong οnmοuseοver="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong οnmοuseοver="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;"> 
<div id="aa1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />  
</div> 
<div id="aa2"></div>
</div> 

<h2>手动滚动 - <strong οnmοuseοver="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong οnmοuseοver="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;"> 
<div id="bb1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />  
</div> 
<div id="bb2"></div>
</div>

</body>
</html>

 

 

相同的两张图片同时向上滚动：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="js滚动合集" />
<meta name="description" content="js滚动合集" />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="js滚动合集。All Rights Reserved" />
<title>js滚动合集 - http://www.nanvba.com/</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
    var speed=30;
    var demo=document.getElementById(d1); 
    var demo1=document.getElementById(d2); 
    var demo2=document.getElementById(d3);
    demo2.innerHTML=demo1.innerHTML;
    function boxTop(){
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
            else{demo.scrollTop++}
        }
    function boxRight(){
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
            else{demo.scrollLeft--}
        }
    function boxBottom(){ 
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
            else{demo.scrollTop--}
        }
    function boxLeft(){
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
            else{demo.scrollLeft++}
        }
    if(e==1){
            var MoveTop=setInterval(boxTop,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveTop);}
            demo.οnmοuseοut=function(){MoveTop=setInterval(boxTop,speed)}
        }
    if(e==2){
            var MoveRight=setInterval(boxRight,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveRight)}
            demo.οnmοuseοut=function(){MoveRight=setInterval(boxRight,speed)}
        }
    if(e==3){
            var MoveBottom=setInterval(boxBottom,speed);
            demo.οnmοuseοver=function(){clearInterval(MoveBottom);}
            demo.οnmοuseοut=function(){MoveBottom=setInterval(boxBottom,speed)}
        }
    if(e==4){
            var MoveLeft=setInterval(boxLeft,speed)
            demo.οnmοuseοver=function(){clearInterval(MoveLeft)}
            demo.οnmοuseοut=function(){MoveLeft=setInterval(boxLeft,speed)}
        }
    if(e=="top"){
            MoveTop=setInterval(boxTop,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveTop);}
        }
    if(e=="right"){
            MoveRight=setInterval(boxRight,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveRight);}
        }
    if(e=="bottom"){
            MoveBottom=setInterval(boxBottom,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveBottom);}
        }
    if(e=="left"){
            MoveLeft=setInterval(boxLeft,speed)
            obj.οnmοuseοut=function(){clearInterval(MoveLeft);}
        }
    }    
</script>
<script type="text/javascript">
// 自动滚动
function boxmove(d4,d5,d6,e1,obj1){
    var speed=30;
    var demo4=document.getElementById(d4); 
    var demo5=document.getElementById(d5); 
    var demo6=document.getElementById(d6);
    demo6.innerHTML=demo5.innerHTML;
    function boxTop1(){
            if(demo6.offsetTop-demo4.scrollTop<=0){demo4.scrollTop-=demo5.offsetHeight}
            else{demo4.scrollTop++}
        }
 
    if(e1==1){
            var MoveTop1=setInterval(boxTop1,speed);
            demo4.οnmοuseοver=function(){clearInterval(MoveTop1);}
            demo4.οnmοuseοut=function(){MoveTop1=setInterval(boxTop1,speed)}
        }
 
    if(e1=="top"){
            MoveTop1=setInterval(boxTop1,speed)
            obj1.οnmοuseοut=function(){clearInterval(MoveTop1);}
        }
 
    }    
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>

<div id="a" style="overflow:hidden;height:100px;width:290px;"> 
<div id="a1"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" />  
</div> 
<div id="a2"></div>
</div> 
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>

<div id="a4" style="overflow:hidden;height:100px;width:290px;"> 
<div id="a5"> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
<img src="http://www.nanvba.com/templets/default/images/logo.gif" alt="" /> 
 
</div> 
<div id="a6"></div>
</div> 
<script type="text/javascript">
boxmove("a4","a5","a6",1);
</script>

</body>
</html>

 

说明：

boxmove(d1,d2,d3,e,obj)
d1 = 外围容器
d2 = 内容
d3 = 复制d2的内容接替循环滚动
e = 方向与方法
1,2,3,4 = 自动滚动，分别对应：上,右,下,左
"top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左
obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置

haining711
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现跑马灯效果
07-23
js里面就实现跑马灯，有上、下、左、右滚动效果，
js实现走马灯效果
z13903931414的博客
01-22 1347
走马灯效果通常指的是一种文本或图片在页面上循环滚动的效果。在JavaScript中，我们可以使用定时器（如。这样，你就有了一个简单的走马灯效果。当然，你可以根据需要进行进一步的样式和功能调整。为了确保在所有浏览器中都能正常工作，可以使用。：页面加载完成后，自动调用。
js走马灯，完整代码
最新发布
qq_41892764的博客
06-03 207
【代码】js走马灯，完整代码。
JS实现跑马灯效果
CHH2177094的博客
09-28 369
【代码】JS实现跑马灯效果。
JS 跑马灯效果实现（很好用）
热门推荐
yangsen251024的专栏
02-26 5万+
实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。 好用之处在于： 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码，如果看不懂，可以跑这个列子 文字1 文字2 文字3 文字4 文字5 function test() { $("#RunTopic").find("li:first").appendTo(
原生JS实现跑马灯效果
12-11
总结起来，这个原生JS实现的跑马灯效果主要依赖HTML的布局和CSS的定位，以及JavaScript的定时器功能来完成动态滚动。通过理解和应用这些基本概念，我们可以创建出各种自定义的跑马灯效果，比如改变滚动方向、增加...
js实现文字跑马灯效果
10-20
在介绍如何使用JavaScript实现文字跑马灯效果之前，先让我们了解一下跑马灯效果的基础知识。跑马灯效果通常用于网页中，它能将一段文本内容在固定区域中循环滚动，仿佛在滚动字幕上一样。这种效果常用于新闻、公告、...
跑马灯效果大全
10-31
### 跑马灯效果大全知识点解析 #### 一、跑马灯效果概述 跑马灯效果是指在网页上文字或图像沿着特定路径移动的一种视觉效果。这种效果常见于网站的横幅广告、新闻滚动条等场景，可以吸引用户的注意力，增加页面的...
js实现跑马灯
h220801__zzl的博客
03-01 1374
js实现跑马灯，给定数组
js 跑马灯效果
qq_39736176的博客
07-21 336
                                                                                    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/tit..
原生js实现跑马灯（走马灯）效果
写写代码，慢慢进步
08-08 6538
js实现跑马灯效果
跑马灯效果js
zwq123w的博客
12-17 287
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;跑马灯效果&lt;/title&gt; &lt;style type="text/css"&gt; * { margin:
JavaScript实现跑马灯效果
qq_42476938的博客
04-03 518
在JavaScript中要写一个函数，函数做的事情就是把第一个字符不断地放到文本的末尾，通过定时器循环调用这个函数即可实现效果，前端代码玩一下很有意思。一段简单的代码，实现类似公司大屏幕上“欢迎XX领导莅临指导”，在JavaScript中可以轻松实现。//html中哦通过DOM找到文本内容。//在html中更新内容。
JS跑马灯效果
weixin_33737774的博客
04-09 86
<head> <title>我是个好人！</title> <script type="text/javascript"> var x = 20; alert(isNaN(x)); //判断其是不是数字 function scroll() { var title = ...
JS跑马灯
AIGC大前端小王子
02-28 840
本文主要介绍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.
javascript跑马灯效果
m0_47505062的博客
01-18 2063
javascript跑马灯效果,代码如下: <script type="text/javascript"> var pos=0; var width=100; var speed=150; var msg="欢迎您访问本网站!"; for(i=0;i<width;i++)msg=" "+msg; function runlight(){ window.status=msg.substring(pos,pos+width); if(pos++==msg.length-1)pos=0; win
JavaScript跑马灯效果教程-深入理解JavaScript
"这个文档提供了一个简单的JavaScript跑马灯效果的实现，通过循环滚动文本来达到动态展示的效果。JavaScript是一种轻量级的脚本语言，由Netscape公司开发，主要用于网页交互和增强用户体验。它不是Java语言的子集，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值