急需一个连续不间断的跑马灯的代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了急需一个连续不间断的跑马灯的代码相关的知识，希望对你有一定的参考价值。
连续不间断的跑马灯的代码(js)
参考技术A 我这有个精简版的连续不间断的跑马灯的代码js的：<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div id=roll1 style="OVERFLOW:hidden; WIDTH:450px;">
<table>
<tr>
<td id=rollleft1>
<table>
<tr>
<td>1111111111111111</td>
<td>2222222222222222</td>
<td>3333333333333333</td>
<td>4444444444444444</td>
</tr>
</table>
</td>
<td id=rollright1> </td>
</tr>
</table>
</div>
<table>
<tr>
<td>
<SCRIPT language=javascript type=text/JavaScript>
var speed1=22
rollright1.innerHTML=rollleft1.innerHTML
function Marquee1()
if(rollright1.offsetWidth-roll1.scrollLeft<=0)
roll1.scrollLeft-=rollleft1.offsetWidth
else
roll1.scrollLeft++
var MyMar1=setInterval(Marquee1,speed1)
roll1.onmouseover=function() clearInterval(MyMar1)
roll1.onmouseout=function() MyMar1=setInterval(Marquee1,speed1)
</SCRIPT>
</td>
</tr>
</table>
</body>
</html> 参考技术B <script language="JavaScript">
var msg = "跑马灯效果";
var speed = 300;
var msgud = " " + msg;
function titleScroll()
if (msgud.length <msg.length) msgud += " - " + msg;
msgud = msgud.substring(1, msgud.length);
document.title = msgud.substring(0, msg.length);
window.setTimeout("titleScroll()", speed);
</script>在使用的<body>中加入 onload='window.setTimeout("titleScroll()",500)'再加一段实现横向跑马灯效果的js代码：<html>
<body>
<div id=demon style="OVERFLOW: hidden; WIDTH: 1008px; HEIGHT: 167px">
<div id=demon1>
<table cellspacing=0 cellpadding=0 width=1008 border=0>
<tbody>
<tr>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img34original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img35original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img36original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img295original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img62original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img63original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img64original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img202original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img203original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img204original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img205original.jpg" width=167 border=0> </a>
</td>
<td>
<a href="" target=_blank><img height=50 alt=""
src="images/img206original.jpg" width=167 border=0> </a>
</td>
<td id=demon2></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<SCRIPT>
var speed1=1
demon2.innerHTML=demon1.innerHTML
function Marquee1()
if(demon2.offsetWidth-demon.scrollLeft<=0)
demon.scrollLeft-=demon1.offsetWidth
else
demon.scrollLeft++
var MyMar1=setInterval(Marquee1,speed1)
demon.onmouseover=function() clearInterval(MyMar1)
demon.onmouseout=function() MyMar1=setInterval(Marquee1,speed1)
</SCRIPT>
</html>再加一个实现纵向图片跑马灯效果的js代码：<div id=demon
style="OVERFLOW: hidden; WIDTH: 190px; HEIGHT: 575px">
<div id=demon1>
<table cellspacing=0 cellpadding=0 width=167 border=0>
<tbody>
<tr>
<td><a href=""
target=_blank><img height=50 alt=""
src="images/img34original.jpg" width=167
border=0></a></td>
</tr>
<tr>
<td height=5></td>
</tr>
<tr>
<td><a href=""
target=_blank><img height=50 alt=""
src="images/img35original.jpg" width=167
border=0></a></td>
</tr>
<tr>
<td height=5></td>
</tr>
<tr>
<td><a href=""
target=_blank><img height=50 alt=""
src="images/img36original.jpg" width=167
border=0></a></td>
</tr>
<tr>
<td height=5></td>
</tr>
<tr>
<td><a href=""
target=_blank><img height=50 alt=""
src="images/img295original.jpg" width=167
border=0></a></td>
</tr>
<tr>
<td height=5></td>
</tr>
其中的图片路径随具体情况改变， speed1代表滚动速度，越小越快！对于图片的宽度或高度，要跟div样式的宽或高搭配得当才能实现无限滚动！
IOS跑马灯效果，实现文字水平无间断滚动
ViewController.h
1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController{ 4 NSTimer *timer; 5 UIScrollView *scrollViewText; 6 } 7 8 @property (nonatomic ,strong) NSArray *arrData; 9 10 11 @end
ViewController.m
1 // 2 // ViewController.m 3 // 跑马灯文字广告 4 // 5 // Created by Time.X on 16/2/15. 6 // Copyright © 2016年 Time.X. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 11 #pragma mark - Class define variable 12 #define K_MAIN_VIEW_SCROLL_HEIGHT 80.0f 13 #define K_MAIN_VIEW_SCROLL_TEXT_TAG 300 14 #define K_MAIN_VIEW_TEME_INTERVAL 0.35 //计时器间隔时间(单位秒) 15 #define K_MAIN_VIEW_SCROLLER_SPACE 20 //每次移动的距离 16 #define K_MAIN_VIEW_SCROLLER_LABLE_WIDTH 280 //字体宽度 17 #define K_MAIN_VIEW_SCROLLER_LABLE_MARGIN 20 //前后间隔距离 18 19 @interface ViewController () 20 21 @end 22 23 @implementation ViewController 24 25 #pragma mark - Class property 26 @synthesize arrData; 27 28 - (void)viewDidLoad { 29 [super viewDidLoad]; 30 31 [self initView]; 32 } 33 34 - (void)didReceiveMemoryWarning { 35 [super didReceiveMemoryWarning]; 36 // Dispose of any resources that can be recreated. 37 } 38 39 40 #pragma mark - Custom method 41 //初始化数据 42 -(void) initView{ 43 44 if (!self.arrData) { 45 self.arrData = @[ 46 @{ 47 @"newsId" :@"201507070942261935", 48 @"newsImg" :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/sy_2015070709395519.jpg", 49 @"newsTitle" : @"三大理由欧元任性抗跌，欧元区峰会将为希腊定调" 50 }, 51 @{ 52 @"newsId" :@201507070929021220, 53 @"newsImg" :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/sy_2015070709273545.jpg", 54 @"newsTitle" :@"欧盟峰会或现希腊转机，黄金打响1162保卫战" 55 }, 56 @{ 57 @"newsId" :@201507070656471857, 58 @"newsImg" :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/2015070706533134.jpg", 59 @"newsTitle" :@"希腊困局欧元不怕，油价服软暴跌8%" 60 } 61 ]; 62 } 63 64 //文字滚动 65 [self initScrollText]; 66 67 //开启滚动 68 [self startScroll]; 69 } 70 71 72 //文字滚动初始化 73 -(void) initScrollText{ 74 75 //获取滚动条 76 scrollViewText = (UIScrollView *)[self.view viewWithTag:K_MAIN_VIEW_SCROLL_TEXT_TAG]; 77 if(!scrollViewText){ 78 scrollViewText = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, K_MAIN_VIEW_SCROLL_HEIGHT)]; 79 scrollViewText.showsHorizontalScrollIndicator = NO; //隐藏水平滚动条 80 scrollViewText.showsVerticalScrollIndicator = NO; //隐藏垂直滚动条 81 scrollViewText.tag = K_MAIN_VIEW_SCROLL_TEXT_TAG; 82 [scrollViewText setBackgroundColor:[UIColor grayColor]]; 83 84 //清除子控件 85 for (UIView *view in [scrollViewText subviews]) { 86 [view removeFromSuperview]; 87 } 88 89 //添加到当前视图 90 [self.view addSubview:scrollViewText]; 91 } 92 93 94 if (self.arrData) { 95 96 CGFloat offsetX = 0 ,i = 0, h = 30; 97 98 //设置滚动文字 99 UILabel *labText = nil; 100 for (NSDictionary *dicTemp in self.arrData) { 101 labText = [[UILabel alloc] initWithFrame:CGRectMake( 102 i * (K_MAIN_VIEW_SCROLLER_LABLE_WIDTH + K_MAIN_VIEW_SCROLLER_LABLE_MARGIN), 103 (K_MAIN_VIEW_SCROLL_HEIGHT - h) / 2, 104 K_MAIN_VIEW_SCROLLER_LABLE_WIDTH, 105 h)]; 106 [labText setFont:[UIFont systemFontOfSize:18]]; 107 [labText setTextColor:[UIColor whiteColor]]; 108 labText.text = dicTemp[@"newsTitle"]; 109 offsetX += labText.frame.origin.x; 110 111 //添加到滚动视图 112 [scrollViewText addSubview:labText]; 113 114 i++; 115 } 116 117 //设置滚动区域大小 118 [scrollViewText setContentSize:CGSizeMake(offsetX, 0)]; 119 } 120 } 121 122 123 //开始滚动 124 -(void) startScroll{ 125 126 if (!timer) 127 timer = [NSTimer scheduledTimerWithTimeInterval:K_MAIN_VIEW_TEME_INTERVAL target:self selector:@selector(setScrollText) userInfo:nil repeats:YES]; 128 129 [timer fire]; 130 } 131 132 133 //滚动处理 134 -(void) setScrollText{ 135 136 CGFloat startX = scrollViewText.contentSize.width - K_MAIN_VIEW_SCROLLER_LABLE_WIDTH - K_MAIN_VIEW_SCROLLER_LABLE_MARGIN; 137 138 [UIView animateWithDuration:K_MAIN_VIEW_TEME_INTERVAL * 2 animations:^{ 139 CGRect rect; 140 CGFloat offsetX = 0.0; 141 142 for (UILabel *lab in scrollViewText.subviews) { 143 144 rect = lab.frame; 145 offsetX = rect.origin.x - K_MAIN_VIEW_SCROLLER_SPACE; 146 if (offsetX < -K_MAIN_VIEW_SCROLLER_LABLE_WIDTH) 147 offsetX = startX; 148 149 lab.frame = CGRectMake(offsetX, rect.origin.y, rect.size.width, rect.size.height); 150 } 151 152 NSLog(@"offsetX:%f",offsetX); 153 154 }]; 155 156 } 157 158 @end
以上是关于急需一个连续不间断的跑马灯的代码的主要内容，如果未能解决你的问题，请参考以下文章