html中如何制作随着屏幕滚动的文字（就是会跟着屏幕走的文字）

Posted 2023-05-16

图片滚动代码 (从右向左滚动)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滚动的图片地址1">

<img border="0" src=" http://要滚动的图片地址2">

</marquee>

图片滚动代码 (从下往上滚动)

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滚动的图片地址1">

<img border="0" src=" http://要滚动的图片地址2"> <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>
把图片的连接地址写在这里
</marquee>
1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。
<marquee direction=left>从右向左滚动</marquee>
<marquee direction=right>从左向右滚动</marquee>
2.behavior属性:指定文本的滚动方式，分为三种:
Scroll:从一端消失后，在另一端出现并继续滚动。
<marquee behavior=scroll>一圈一圈地滚动</marquee>
Slide:从一端滚动，接触到另一端后停止
<marquee behaviro=slide>只滚动一次就停止</marquee>
Alternate:从一端滚动到另一端后，反向滚动。
<marquee behavior=alternate>来回滚动</marquee>
direction=up（left、right、down） 这个属性可以更改，这样就可以实现上下左右了 但是.我建议用一种无缝的文字滚动.这样的效果会比较好看.而用marquee就没那么好了方法代码 先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性：
innerhtml:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
function Marquee()
if(demo2.offsetHeight-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>

向下滚动：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee()
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else
demo.scrollTop--


var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() clearInterval(MyMar)
demo.onmouseout=function() MyMar=setInterval(Marquee,speed)
</script>

向左滚动：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee()
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else
demo.scrollLeft++


var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() clearInterval(MyMar)
demo.onmouseout=function() MyMar=setInterval(Marquee,speed)
</script>

向右滚动：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee()
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else
demo.scrollLeft--


var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() clearInterval(MyMar)
demo.onmouseout=function() MyMar=setInterval(Marquee,speed)
</script> 参考技术A <marquee>这放字</marquee>，具体的效果可以自己设定，你去百度查一下marquee的属性，挺多，这里写不下 参考技术B 你要的是文字随着滚动条上下移动吧。<script type="text/javascript" language="javascript">
function addEventHandler(target, type, func)
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;

var advIniTop = 0;
function move()
var layer1 = document.getElementById("nav1");
if (layer1) layer1.style.top = advIniTop + document.body.scrollTop || document.documentElement.scrollTop + 10 + "px";

addEventHandler(window, "scroll", move);
</script><div id="nav1" style="position:absolute;border:1px solid #EEE;z-index:10;top:10px;width:232px">文字放在这</div>

iOS如何设置滚动文字边缘渐变

设计上有一个这种文字滚动到屏幕外的时候,滚动到边缘进出场需要添加渐变透明度的需求 ,这个以前没有做过于是网上找了找

iOS文字颜色渐变透明 可惜它这个只支持半边的渐变,方向有上下或者左右啊,已经不能满足需求了,它的原理是设置渐变的maskLayer

于是,照猫画虎,写了两个渐变layer当成subLayer加上去,效果还行,就是颜色需要再调整调整

    CGFloat SCREEN_WIDTH = UIScreen.mainScreen.bounds.size.width;
    CGFloat SCREEN_HEIGHT = UIScreen.mainScreen.bounds.size.height;
    NSString *text = @"	壬戌之秋，七月既望，
苏子与客泛舟游于赤壁之下。
清风徐来，水波不兴。
举酒属客，诵明月之诗，
歌窈窕之章。少焉，月出于东山之上，
徘徊于斗牛之间。
白露横江，水光接天。纵一苇之所如，
凌万顷之茫然。浩浩乎如冯虚御风，	
而不知其所止；飘飘乎如遗世独立，
羽化而登仙。
	于是饮酒乐甚，扣舷而歌之。
歌曰：“桂棹兮兰桨，击空明兮溯流光。
渺渺兮予怀，望美人兮天一方。
”客有吹洞箫者，倚歌而和之。
其声呜呜然，如怨如慕，
如泣如诉，余音袅袅，
不绝如缕。舞幽壑之潜蛟，
泣孤舟之嫠妇。
	苏子愀然，正襟危坐而问客曰：
“何为其然也？”客曰：“‘月明星稀，乌鹊南飞’，此非曹孟德之诗乎？西望夏口，
东望武昌，山川相缪，
郁乎苍苍，此非孟德之困于周郎者乎？
方其破荆州，下江陵，顺流而东也，舳舻千里，
旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，
而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，
驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，
羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”
	苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也。而又何羡乎！且夫天地之间，物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，
耳得之而为声，目遇之而成色，
取之无禁，用之不竭，是造物者之无尽藏也，
而吾与子之所共适。”
	客喜而笑，洗盏更酌。肴核既尽，
杯盘狼籍。相与枕藉乎舟中，不知东方之既白。";
    
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(20, 100, SCREEN_WIDTH - 40 , 100)];
    textView.editable = NO;
    textView.text = text;
    textView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:textView];
    textView.scrollEnabled = NO;
    CGFloat textHeight =  [textView sizeThatFits:CGSizeMake(SCREEN_WIDTH-40, MAXFLOAT)];
    textView.scrollEnabled = YES;
    textView.contentSize = CGSizeMake(SCREEN_WIDTH-40, textHeight*2);
    textView.frame = CGRectMake(20, 100, SCREEN_WIDTH - 40 , textHeight);
    
    NSArray *colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithWhite:0 alpha:0] CGColor],
                       (id)[[UIColor colorWithWhite:0 alpha:0.5] CGColor],
                       (id)[[UIColor colorWithWhite:0 alpha:1] CGColor],
                        nil];
    CAGradientLayer *topLayer = [CAGradientLayer layer];
    topLayer.colors = colors;
    topLayer.startPoint = CGPointMake(0, 1);
    topLayer.endPoint = CGPointMake(0, 0);
    topLayer.frame = CGRectMake(20, 100, SCREEN_WIDTH-40, 50);
    [self.view.layer addSublayer:topLayer];

    CAGradientLayer *bottomLayer = [CAGradientLayer layer];
    bottomLayer.colors = colors;
    bottomLayer.startPoint = CGPointMake(0, 0);
    bottomLayer.endPoint = CGPointMake(0, 1);
    bottomLayer.frame = CGRectMake(20, textHeight+50,SCREEN_WIDTH-40, 50);
    [self.view.layer addSublayer:bottomLayer];