Javascript实现连续滚动的跑马灯，可上下左右滚动

最新推荐文章于 2024-01-22 19:19:52 发布
最新推荐文章于 2024-01-22 19:19:52 发布
阅读量3.6k 收藏 2
点赞数
分类专栏： 脚本语言 文章标签： javascript border table scroll function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng_sundy/article/details/1007461
版权
今天在 www.51windows.net上发现一个简单的图片滚动的脚本，写的很不错，我修改了一下，可随意上下左右滚动了
< html >
< head >
< title > 左右滚动的图片效果 - 51windows.Net </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< script  language ="javascript"  src ="js/js.js"  type ="text/javascript" ></ script >
</ head >
< body  bgcolor ="#999999" >

< table  border ="1"  width ="760"  align ="center" >
   < tr >
     < td  width ="215" >
        Scroll Width: < input  type ="text"  size ="5"  name ="scrollWidth" >< BR >
        Offset Width: < input  type ="text"  size ="5"  name ="offsetWidth" >
         </ td >
     < td  width ="545" >
         < div  id ="demo"  style ="overflow:hidden;height:120px;width:543px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="demo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >                  </ td >
                 < td  id ="demo2" ></ td >
             </ tr >
         </ table >
         </ div >
         </ td >
   </ tr >
   < tr >
     < td  width ="215" >   </ td >
     < td  width ="545" >
             < div  id ="v1demo"  style ="overflow:hidden;height:120px;width:543px;" >
             < table  width ="100%"  cellspacing ="0" >
                 < tr >
                     < td  id ="v1demo1" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table ></ td >
                     < td  id ="v1demo2"  bgcolor ="#000000" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
             </ table >
             </ div >
         </ td >
   </ tr >
   < tr >
     < td  width ="215" >   </ td >
     < td  width ="545" >
             < div  id ="v2demo"  style ="overflow:hidden;height:120px;width:543px;" >
             < table  width ="100%"  cellspacing ="0" >
                 < tr >
                     < td  id ="v2demo1" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table ></ td >
                     < td  id ="v2demo2"  bgcolor ="#FF0000" >
                         < table  cellspacing ="2" >
                             < tr >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                                 < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
             </ table >
             </ div >
         </ td >
   </ tr >
   < tr >
     < td ></ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td ></ td >
     < td >
         < table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="5" >
       < tr >
         < td >
         < div  id ="hdemo"  style ="overflow:hidden;height:550px;width:190px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="hdemo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr >
                 < td  id ="hdemo2" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
         </ table >
         </ div >
                 </ td >
         < td >
         < div  id ="h2demo"  style ="overflow:hidden;height:550px;width:190px;" >
         < table  width ="100%"  cellspacing ="0" >
             < tr >
                 < td  id ="h2demo1" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr >
                 < td  id ="h2demo2" >
                     < table  cellspacing ="2" >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                         < tr >
                             < td >< a  href ="http://www.51windows.net/mypic/sight/page_01.htm"  target ="_blank" >< img  src ="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG"  border ="0" /></ a ></ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
         </ table >
         </ div >
                 </ td >
       </ tr >
     </ table ></ td >
   </ tr >
</ table >
< script >
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth;}else{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

//通用上下，左右连续滚动，跑马灯
function MarqueeTest(direct,MainId,contentId,copyId){
  var objMain = document.getElementById(MainId);
    var objContent = document.getElementById(contentId);
    var objCopy = document.getElementById(copyId);
    var mainWidth = objMain.offsetWidth
    var contentWidth = objContent.offsetWidth
    var copyWidth = objCopy.offsetWidth;
    var mainHeight = objMain.offsetHeight;
    var contentHeight = objContent.offsetHeight;
    var copyHeight = objCopy.offsetHeight;
    if (direct=="LEFT"){
        if (copyWidth-objMain.scrollLeft<=0){
            objMain.scrollLeft-=contentWidth;
        }else{
            objMain.scrollLeft+=2;
        }
    }else if (direct=="RIGHT"){
        if (copyWidth-mainWidth-objMain.scrollLeft>=0){
            objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
        }else{
            objMain.scrollLeft-=2;
        }
    }else if (direct=="UP"){
        if (copyHeight-objMain.scrollTop<=0){
            objMain.scrollTop-=contentHeight;
        }else{
            objMain.scrollTop+=2;
        }
    }else if (direct=="DOWN"){
        if (copyHeight-mainHeight-objMain.scrollTop>=0){
            objMain.scrollTop=contentHeight + copyHeight - mainHeight;
        }else{
            objMain.scrollTop-=2;
        }      
    }
}

var v1Scroll = setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed);
v1demo.onmouseover=function() {clearInterval(v1Scroll)}
v1demo.onmouseout=function() {v1Scroll=setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed)}

var v2Scroll = setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed);
v2demo.onmouseover=function() {clearInterval(v2Scroll)}
v2demo.onmouseout=function() {v2Scroll=setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed)}

var h1Scroll = setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed);
hdemo.onmouseover=function() {clearInterval(h1Scroll)}
hdemo.onmouseout=function() {h1Scroll=setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed)}

var h2Scroll = setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed);
h2demo.onmouseover=function() {clearInterval(h2Scroll)}
h2demo.onmouseout=function() {h2Scroll=setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed)}
 </ script >
</ body >
</ html >
 
feng_sundy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现上下滚动跑马灯效果
05-10
实现跑马灯上下滚动效果，marquee标签被摒弃后不使用js实现的跑马灯效果保险些
php文字左右滚动代码,向左滚动文字 js代码效果
weixin_32443035的博客
03-11 195
滚动文字效果#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}var tc;window.onload=function(){var o=...
图+文上下滚动跑马灯实现
Lzo4A的博客
07-26 1186
跑马灯上下滚动，需要三部分： 1.当前显示的图文信息区域，用类ItemInfo对象currentItem表示,ItemInfo类包括Rect信息与绘制图文信息，并提供绘制方法。 2.紧挨着当前区域上方的区域，用类ItemInfo对象preItem，如果跑马灯向上滚，此对象表示滚动后的最终位置。 3.紧挨着当前区域下方的区域，用类ItemInfo对象nextItem，如果跑马灯向上滚，此对象表示下一条图文信息，滚动到currentItem的位置。
JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动
webkook
08-19 1186
    &lt;!-- 指向链接图片的URL --&gt; &lt;div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"&gt; &lt;div id="dem.
js实现走马灯效果
最新发布
z13903931414的博客
01-22 715
走马灯效果通常指的是一种文本或图片在页面上循环滚动的效果。在JavaScript中，我们可以使用定时器（如。这样，你就有了一个简单的走马灯效果。当然，你可以根据需要进行进一步的样式和功能调整。为了确保在所有浏览器中都能正常工作，可以使用。：页面加载完成后，自动调用。
JS原生跑马灯 鼠标移入暂停 移出继续 可左可右滚动
weixin_30709929的博客
11-08 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style:...
js for加减乘除
Xerale的博客
08-20 416
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
html跑马灯可以上下动ma,使用 JS 实现上下滚动走马灯
weixin_32566515的博客
06-07 792
?前言今天在做商城首页时，遇到一个上下走马灯功能，因为之前也只是接触过左右的走马灯，一时还不知道从何下手。在网上看了几个 demo，并亲自运行了一下，是可以实现的。但是，能运行不知其所以然也不行，所以还需要自己编码去真正的理解，下面是我的示例。1.首先定义 css样式#div1{width: 180px;margin: auto;border: 1px solid blue;overflow: h...
js实现上下滚动跑马灯
CSDN for recording problems
07-16 2829
css .core { height: 18px; overflow: hidden; } html <div class="shell"> <div id="div4" class="core"> <a href="javascript:">js实现上下滚动跑马...
原生js实现跑马灯（走马灯）效果
写写代码，慢慢进步
08-08 6370
js实现跑马灯效果
js实现跑马灯
h220801__zzl的博客
03-01 1311
js实现跑马灯，给定数组
JS可控制的图片左右滚动特效（走马灯）
05-12
内容索引:脚本资源,Ajax/JavaScript,滚动特效,走马灯　　新浪网和网易都经常用到，用JAVASCRIPT去控制一行显示的滚动图片，鼠标放上后停止，移开后继续；如果点击左右两侧按键则会显示下一幅，很像FLASH的动画效果，但这个是用JS实现的。
实用上下左右滚动的跑马灯JS
10-27
一般网站非常实用的上下左右滚动的跑马灯JS
javascript 单行文字向上跑马灯滚动显示
12-09
代码如下： 软件开发网 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
javascript实现文字跑马灯效果
11-20
本文实例为大家分享了js实现文字跑马灯效果的具体代码，供大家参考，具体内容如下 思路： 1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。 2.获取滚动条到元素左边的距离,递归...
【JavaScript源代码】Vue实现跑马灯样式文字横向滚动.docx
12-29
　本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码，供大家参考，具体内容如下　需求:　在Vue项目的顶部,来实现文字左右滚动　步骤:　1、可以自己封装一个组件,也可以自己写,也可以复制以下代码 ...
文字上下滚动（走马灯效果）
01-16
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到...
js实现小方块上下左右移动
蒲小若的博客
08-16 9715
#box{ width: 50px; height: 50px; position: absolute; background: palevioletred; } stop var speed = 10; var flag = true; var interId; function moveLeft(){
js跑马灯 页面滚动
hammer1010的博客
12-26 925
没有特别的幸运，那么就特别的努力！！！ 既然没有优人的天赋，那就拼吧！ html <div class="test" id="test"></div> css .test{ width: 455px; height: 180px; position: relative; overflow: hidden; /* z-index:9; */ } js ...
vue文字滚动跑马灯
09-01
Vue文字滚动跑马灯是一种常见的网页设计效果，通常用来展示一些重要的信息或者广告内容。 在Vue中实现文字滚动跑马灯效果，可以通过CSS动画或者JavaScript来实现。下面是一种较简单的实现方式： 1. 首先，在Vue组件中定义一个变量用来存储滚动跑马灯的文本内容，如`message`。 2. 在CSS中定义跑马灯的样式。可以使用`animation`属性来实现无限循环滚动的效果。例如： ```css .marquee { overflow: hidden; animation: marquee 10s infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` 3. 在Vue模板中使用`marquee`类来包裹需要滚动的文本内容，并动态绑定`message`变量。例如： ```html <div class="marquee"> {{ message }} </div> ``` 4. 在Vue的`created`或`mounted`钩子函数中，可以通过Ajax请求或者其他方式从后端获取跑马灯的文本内容，并将其赋值给`message`变量。例如： ```javascript created() { // 从后端获取跑马灯文本内容 this.message = '这是一条滚动的文字'; } ``` 通过以上步骤，即可实现Vue文字滚动跑马灯效果。需要注意的是，根据实际需求，可以调整动画的持续时间、滚动方向以及其他样式属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值