android怎样实现跑马灯效果

Posted 2023-04-19

android自带的跑马灯效果不太好控制,不能控制速度,不能即时停止和启动,而且还受焦点的影响蛋疼不已。由于项目需求需要用的可控制性高的跑马灯效果,所以自己写了一个自定义的TextView

android:ellipsize="marquee" android:singleLine="true" 这两个属性也要加上

public class MarqueeText extends TextView implements Runnable

private int currentScrollX;// 当前滚动的位置

private boolean isStop = false;

private int textWidth;

private boolean isMeasure = false;

public MarqueeText(Context context)

super(context);

// TODO Auto-generated constructor stub



public MarqueeText(Context context, AttributeSet attrs)

super(context, attrs);



public MarqueeText(Context context, AttributeSet attrs, int defStyle)

super(context, attrs, defStyle);



@Override

protected void onDraw(Canvas canvas)

// TODO Auto-generated method stub

super.onDraw(canvas);

if (!isMeasure) // 文字宽度只需获取一次就可以了

getTextWidth();

isMeasure = true;





/**

* 获取文字宽度

*/

private void getTextWidth()

Paint paint = this.getPaint();

String str = this.getText().toString();

textWidth = (int) paint.measureText(str);



@Override

public void run()

currentScrollX -= 2;// 滚动速度

scrollTo(currentScrollX, 0);

if (isStop)

return;



if (getScrollX() <= -(this.getWidth()))

scrollTo(textWidth, 0);

currentScrollX = textWidth;

// return;



postDelayed(this, 5);



// 开始滚动

public void startScroll()

isStop = false;

this.removeCallbacks(this);

post(this);



// 停止滚动

public void stopScroll()

isStop = true;



// 从头开始滚动

public void startFor0()

currentScrollX = 0;

startScroll();



布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<Button

android:id="@+id/start"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="start"

android:text="走起" />

<Button android:id="@+id/stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="stop" android:text="停止" /> <Button android:id="@+id/startfor0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="startFor0" android:text="从头开始" /> <simtice.demo.marqueetext.MarqueeText android:id="@+id/test" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#339320" android:ellipsize="marquee" android:singleLine="true" android:text="这才是真正的文字跑马灯效果这才是真正的字跑马灯效果这才是真正的" android:textColor="#000000" android:textSize="20dp" > </simtice.demo.marqueetext.MarqueeText></LinearLayout>MainActivitypublic class MainActivity extends Activity private MarqueeText test; @Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); test = (MarqueeText) this.findViewById(R.id.test); public void start(View v) test.startScroll(); public void stop(View v) test.stopScroll(); public void startFor0(View v) test.startFor0(); 参考技术A Android自带的跑马灯效果不太好控制,不能控制速度,不能即时停止和启动,而且还受焦点的影响蛋疼不已。由于项目需求需要用的可控制性高的跑马灯效果,所以自己写了一个自定义的TextView

android:ellipsize="marquee" android:singleLine="true" 这两个属性也要加上

public class MarqueeText extends TextView implements Runnable

private int currentScrollX;// 当前滚动的位置

private boolean isStop = false;

private int textWidth;

private boolean isMeasure = false;

public MarqueeText(Context context)

super(context);

// TODO Auto-generated constructor stub



public MarqueeText(Context context, AttributeSet attrs)

super(context, attrs);



public MarqueeText(Context context, AttributeSet attrs, int defStyle)

super(context, attrs, defStyle);



@Override

protected void onDraw(Canvas canvas)

// TODO Auto-generated method stub

super.onDraw(canvas);

if (!isMeasure) // 文字宽度只需获取一次就可以了

getTextWidth();

isMeasure = true;





/**

* 获取文字宽度

*/

private void getTextWidth()

Paint paint = this.getPaint();

String str = this.getText().toString();

textWidth = (int) paint.measureText(str);



@Override

public void run()

currentScrollX -= 2;// 滚动速度

scrollTo(currentScrollX, 0);

if (isStop)

return;



if (getScrollX() <= -(this.getWidth()))

scrollTo(textWidth, 0);

currentScrollX = textWidth;

// return;



postDelayed(this, 5);



// 开始滚动

public void startScroll()

isStop = false;

this.removeCallbacks(this);

post(this);



// 停止滚动

public void stopScroll()

isStop = true;



// 从头开始滚动

public void startFor0()

currentScrollX = 0;

startScroll();



布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<Button

android:id="@+id/start"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="start"

android:text="走起" />

<Button android:id="@+id/stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="stop" android:text="停止" /> <Button android:id="@+id/startfor0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="startFor0" android:text="从头开始" /> <simtice.demo.marqueetext.MarqueeText android:id="@+id/test" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#339320" android:ellipsize="marquee" android:singleLine="true" android:text="这才是真正的文字跑马灯效果这才是真正的字跑马灯效果这才是真正的" android:textColor="#000000" android:textSize="20dp" > </simtice.demo.marqueetext.MarqueeText></LinearLayout>MainActivitypublic class MainActivity extends Activity private MarqueeText test; @Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); test = (MarqueeText) this.findViewById(R.id.test); public void start(View v) test.startScroll(); public void stop(View v) test.stopScroll(); public void startFor0(View v) test.startFor0(); 本回答被提问者和网友采纳

一行文字跑马灯怎样用Jquery或js做？

使用方法：

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

<script src="jquery-1.11.2.min.js"></script> <script src="marquee.js"></script>

HTML结构：

跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。

123456789101112    <div class="container">  <div class="marquee-sibling"> Breaking News </div>  <div class="marquee">    <ul class="marquee-content-items">      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>      <li>Item 4</li>      <li>Item 5</li>    </ul>  </div></div>    

CSS样式：

下面是该跑马灯特效的一些基本样式。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    .container   width: 100%;  background: #4FC2E5;  float: left;  display: inline-block;  overflow: hidden;  box-sizing: border-box;  height: 45px;  position: relative;  cursor: pointer;  .marquee-sibling   padding: 0;  background: #3BB0D6;  width: 20%;  height: 45px;  line-height: 42px;  font-size: 12px;  font-weight: normal;  color: #ffffff;  text-align: center;  float: left;  left: 0;  z-index: 2000;  .marquee,*[class^="marquee"]   display: inline-block;  white-space: nowrap;  position: absolute;  .marquee  margin-left: 25%;   .marquee-content-items   display: inline-block;  padding: 5px;  margin: 0;  height: 45px;  position: relative;  .marquee-content-items li   display: inline-block;  line-height: 35px;  color: #fff;  .marquee-content-items li:after   content: "|";  margin: 0 1em;    

初始化插件：

123    $(function ()  createMarquee(););    

在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

配置参数：

下面是该跑马灯特效的可用配置参数。

12345678910111213141516171819202122232425262728    $(function ()    createMarquee(          // controls the speed at which the marquee moves    duration:30000,       // right margin between consecutive marquees    padding:20,       // class of the actual div or span that will be used to create the marquee -     // multiple marquee items may be created using this item's content.     // This item will be removed from the dom    marquee_class:'.example-marquee',       // the container div in which the marquee content will animate.     container_class: '.example-container',       // a sibling item to the marqueed item  that affects -     // the end point position and available space inside the container.     sibling_class: '.example-sibling',       // Boolean to indicate whether pause on hover should is required.     hover: false    );  );    

参考技术A <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
<div id="demo1">
标准之路——DIV+CSS教程,网而布局,web2.0,常用代码,水晶图标,幻灯图片
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //滚动速度值，值越大速度越慢
var nnn=200/demo1.offsetHeight;
for(i=0;i<nnn;i++)demo1.innerHTML+="<br />"+ demo1.innerHTML
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee()
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else
demo.scrollTop++


var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function()clearInterval(MyMar) //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function()MyMar = setInterval(Marquee,speed) //鼠标移开时重设定时器
-->
</script>