跑马灯demo

今天看了FrameLayout,使用FrameLayout布局做的一个demo

MainActivity.java:

import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


import android.widget.TextView;


import java.util.Random;



public class MainActivity extends AppCompatActivity {

    private int colornum = 0;
    final int colors[] = new int[] {
            Color.BLACK,
            Color.BLUE,
            Color.GREEN,
            Color.YELLOW,
            Color.RED,
            Color.GRAY
    };
    final int[] names = new int[]{
            R.id.textView,
            R.id.textView2,
            R.id.textView3,
            R.id.textView4,
            R.id.textView5,
            R.id.textView6
    };
    TextView[] views = new TextView[names.length];
    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if(msg.what==0){
            for(int i = 0;i<names.length;i++){
                views[i].setBackgroundColor(colors[new Random().nextInt(4)+1]);
            }
                colornum+=1;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for(int i = 0;i<=5;i++){
            views[i] = (TextView)super.findViewById(names[i]);
        }
        new Thread(){
            @Override
            public void run() {
                for(;;){
                handler.sendEmptyMessage(0);
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }}
        }.start();
    }
}
xml文件:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="320pt"
        android:height="320pt"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="326dp"
        android:layout_height="461dp"
        android:width="280pt"
        android:height="280pt"
        android:layout_gravity="center"
        android:id="@+id/textView2" />

    <TextView
        android:layout_width="289dp"
        android:layout_height="426dp"
        android:width="240pt"
        android:height="240pt"
        android:layout_gravity="center"
        android:id="@+id/textView3" />

    <TextView
        android:layout_width="258dp"
        android:layout_height="wrap_content"
        android:width="200pt"
        android:height="200pt"
        android:layout_gravity="center"
        android:id="@+id/textView4" />

    <TextView
        android:layout_width="229dp"
        android:layout_height="380dp"
        android:width="320pt"
        android:height="320pt"
        android:layout_gravity="center"
        android:id="@+id/textView5" />

    <TextView
        android:layout_width="195dp"
        android:layout_height="354dp"
        android:width="320pt"
        android:height="320pt"
        android:layout_gravity="center"
        android:id="@+id/textView6" />
</FrameLayout>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 。 这是一个简单的跑马灯代码: ``` <!DOCTYPE html> <html> <head> <style> .marquee { width: 100%; line-height: 50px; background-color: #ccc; color: #fff; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee p { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } </style> </head> <body> <div class="marquee"> <p>这是一个简单的跑马灯效果!</p> </div> </body> </html> ``` 这个代码使用了CSS3动画,使用了一个叫做`marquee`的类,它有一个宽度为100%的块级元素,并且使用了动画效果。 希望这个代码能帮到你! ### 回答2: 下面是一个使用JavaScript编写的简单跑马灯示例: HTML部分: ``` <!DOCTYPE html> <html> <head> <title>跑马灯示例</title> <style> #marquee { width: 300px; height: 50px; overflow: hidden; border: 1px solid black; white-space: nowrap; } </style> </head> <body> <div id="marquee">跑马灯内容在这里</div> <script src="script.js"></script> </body> </html> ``` JavaScript部分(script.js): ```javascript window.onload = function() { var marquee = document.getElementById("marquee"); var text = marquee.innerText; marquee.innerHTML = text.repeat(2); // 复制一遍内容以实现无缝滚动 marquee.style.animationDuration = (text.length / 6) + "s"; // 根据内容长度设置滚动速度 }; ``` 以上代码中,首先在HTML中创建了一个具有固定宽度和高度的div元素,用于显示跑马灯内容。然后,在JavaScript中获取该div元素的引用,并获取其innerText,即跑马灯的文本内容。接下来,将文本内容复制一遍,并设置动画持续时间为文本长度的六分之一,这样就实现了一个简单的跑马灯效果。最后,在HTML中引入了script.js脚本文件。 注意:这仅仅是一个简单的实现示例,实际应用中可能需要针对不同的需求进行更多的定制和优化。 ### 回答3: 跑马灯是网页设计中经常使用的一种效果,可以用JavaScript来实现。下面是一个使用JavaScript编写的跑马灯demo的实现方式: 首先,在HTML中创建一个包含跑马灯内容的容器,例如一个div元素,并给其一个唯一的id,如"marquee-container"。然后,可以通过CSS来设置容器的样式,例如设置宽度、高度、背景颜色等。 接下来,在JavaScript中获取跑马灯容器的引用,可以使用getElementById()方法,将其保存在一个变量中,例如"marquee"。 然后,在JavaScript中通过定时器函数setInterval()来实现跑马灯效果。可以先定义一个变量"position"来追踪跑马灯内容的当前位置,初始值为0。然后使用setInterval()函数设置一个时间间隔,例如每隔100毫秒移动跑马灯内容。 在定时器的回调函数中,可以将"position"向左移动一个像素,可以使用marginLeft样式属性来实现。当"position"移动的距离大于等于跑马灯容器的宽度时,将"position"设置为0,从而实现循环滚动。 最后,在JavaScript中使用window.onload事件来确保页面加载完成后才执行跑马灯功能。在事件处理程序中,可以使用setInterval()函数来启动跑马灯。 以上是一个简单的跑马灯demo的实现方式,通过使用JavaScript的定时器和样式属性,可以实现跑马灯效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值