javascript简单的跑马灯实现

爱被打了一巴掌 2022-05-26 04:18 270阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<meta charset="UTF-8">
    		<title>文字跑马灯</title>
    	 <style>  
                #move{  
                    position:absolute; 
                    width:500px;  
                    height:50px;  
                    top:200px;  
                    font-size: 50px;
                }  
            </style>  
            <script>  
            	//1、定义加载事件
            	 window.onload = function(){  
            	 	//2、获取到要移动的元素ID
                    moves = document.getElementById("move"); 
                    //alert((moves.style.left));
                    //3、设置元素的起始位置像素
                    moves.style.right = '-400px'; 
                    //4、调用移动方法
                    moveItRight();
                } 
                //定义方法
                function moveItRight(){  
                	//判断元素起始位置是否大于屏幕宽度
                  if(parseInt(moves.style.right) > (screen.width))
                       //将其赋值为0
                       moves.style.right = 0;
                       //每调用一次加3个像素
                   moves.style.right = parseInt(moves.style.right)+3+'px'; 
                  setTimeout("moveItRight()",50);   // 在指定的毫秒数后调用函数  
                }
            </script>  
        </head>  
        <body>  
            <div id="move"> 面朝大海 春暖花开 </div>  
        </body>  
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关跑马灯 TextView

import android.content.Context; import android.graphics.Canvas; import andro

朱雀/ 2023年10月05日 14:14/ 0 赞/ 118 阅读

相关 java实现文字跑马灯_Android 中TextView中跑马灯效果的实现方法

条件： 1、android:ellipsize=”marquee” 2、TextView必须单行显示，即内容必须超出TextView大小 3、TextView要获得焦点才

╰半夏微凉°/ 2022年11月06日 10:48/ 0 赞/ 243 阅读

相关 HarmonyOS 实现跑马灯效果

`跑马灯效果实现效果图` ![20210728102605974.gif][] `注意事项: HarmonyOS里面Text由于multiple_lines默认为fals

野性酷女/ 2022年09月01日 13:47/ 0 赞/ 210 阅读

相关 XML 实现 TextView的跑马灯效果

本文用XML直接实现TextView的跑马灯效果，代码如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm

小鱼儿/ 2022年08月27日 06:58/ 0 赞/ 232 阅读

相关 TextView实现跑马灯效果

TextView实现跑马灯效果: <TextView android:id="@+id/cansaibiaoti"

蔚落/ 2022年08月20日 14:22/ 0 赞/ 294 阅读

相关 TextView实现跑马灯效果

下面是布局代码，需要注意的是设置singleLine属性、ellipsize属性、focusable属性和focusableInTouchMode属性 <TextVi

冷不防/ 2022年08月14日 05:40/ 0 赞/ 246 阅读

相关 javascript简单的跑马灯实现

<!DOCTYPE html> <html> <meta charset="UTF-8"> <title>文字跑马灯</titl

爱被打了一巴掌/ 2022年05月26日 04:18/ 0 赞/ 271 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 508 阅读

相关 android实现跑马灯效果

第一步：新建一个新项目，MarqueeTextView 首先为了观察到跑马灯效果，将要显示的文字极可能写长。在strings.xml目录里面将 <string

超、凢脫俗/ 2021年10月23日 07:59/ 0 赞/ 457 阅读

相关 Marquee.js实现跑马灯效果

Marquee.js实现跑马灯效果 1、Marquee.js文件 / - Marquee.js - 参数： - ID：滚动对象（必须）

淩亂°似流年/ 2021年09月16日 05:36/ 0 赞/ 735 阅读