整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html中滚动字体的设置

页中添加滚动字幕效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>滚动字体的设置</title>

</head>

<body>

<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

<script type="text/javascript">

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象(画笔)


ctx.shadowBlur = 10; // 阴影距离

ctx.shadowColor = "red" // 阴影颜色

ctx.shadowOffsetX = 30 // 阴影偏移

ctx.shadowOffsetY = 30 // 阴影偏移


ctx.font = "150px 楷体"


ctx.fillText("你好!", 20,150)


ctx.fillText("你好!", 20,350)


ctx.strokeText('你好!',23, 153)


ctx.strokeText('你好',23, 553)


canvas绘制文字



var x = 600

setInterval(function(){

if(x > -350){

//清空画布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好!',x, 153)

ctx.fillText("你好!", x,350)


ctx.font = "50px 宋体"

ctx.strokeText('每天学习一点点',x, 553)


x -= 3

}else{x=590}



}, 16)


</script>


</body>

</html>

用js来实现。

html:

<div class="box">
 <p class="animate">
 文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
 </p>
</div>

css:

天要实现的是字体上下无缝滚动效果,在友情链接这块,2345提供了很多的链接并且通过定时的无缝滚动让内容显示在窗口中,这里我也来写下这个功能,当页面载入时链接自动往上无缝滚动,当鼠标停留时滚动停止。

首先我们先来实现字幕滚动效果,一般情况下如果是多个单条数据翻滚,比较单间的方法就是用css来实现,通过animation和@keyframes配合就可以快速的实现滚动,但是但是这时会有个问题,滚到最后一条时会自动跳到第一条,中间出现了断层的感觉,所以使用该方法时最好将第一条数据复制一遍放尾部,然后通过animation-fill-mode: forwards;将动画重置为第一帧,这样就能够实现无缝的滚动了。

.linkContent {
 width: 90%;
 height: 20px;
 animation: move 3s infinite 2s running; 
 animation-fill-mode: forwards; 
}
@keyframes move {
 0% {
 transform:translatey(0px);
 }
 100% {
 transform:translateY(-20px);
 }
}

这里我的数据是通过p标签遍历a标签得到的,所以每行有好多个a标签,具体个数与内容长短有关,所以复制第一条无法实现,所以这方法不合适我这里使用,所以这里我们还是用js来实现吧,为了更好的获取元素的位置,这里稍微改动下HTML,在列表下面加个p标签方便定位。

接下来我们开始写方法,在methods中写个paly方法, 通过document.getElementById来获取当前元素,这里scrollTop获取被选元素的垂直滚动条位置,offsetHeight获取该控件本身的高度,然后设置一个定时器,给定一个speed时间,这样就实现了自动无缝滚动的效果了。

play () {
 var speed = 100;
 var wrapper = document.getElementById('wrapper');
 var demo1 = document.getElementById('demo1');
 var demo2 = document.getElementById('demo2');
 demo2.innerHTML=demo1.innerHTML 
 console.log(demo2.innerHTML)
 function Marquee(){ 
 if(demo2.offsetHeight-wrapper.scrollTop<=0) 
 wrapper.scrollTop-=demo1.offsetHeight; 
 else{ 
 wrapper.scrollTop+=1 
 } 
 } 
 var MyMar=setInterval(Marquee,speed) 
 wrapper.onmouseover=function() {clearInterval(MyMar)} 
 wrapper.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
}, 

因为 是获取当前的DOM元素进行操作的,所以这里我们要等页面载入之后再进行滚动操作,所以这里我们在mounted()中调用paly方法即可,还有.linkContent比忘了加上overflow: hidden;属性。

 mounted(){
 this.play();
 },

这是结合了JavaScript语法实现的文字无缝滚动效果,虽然达到了预期,但是现在在用vue,我还是想用vue来实现这个功能,只是目前还没有研究出来,主要是因为我的a标签数据是全包裹在一个p标签中的,也就是每行的数据不定,内容也不定,所以只能通过移动p标签外面的div来实现功能,不知有没有大神能指点一二。