关闭

JavaScript 实现打字机效果,跑马灯效果

时间: 2018-07-04阅读: 1316标签: 效果

这篇文章在不使用任何插件的情况,以最简洁的原生JavaScript来实现打字机效果和跑马灯效果。


一、打字效果

打字效果即把一段话一个字一个字的显示出来。首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。循环总字数来实现一个字一个字的输出。  

html:

<form name="tickform">
    <textarea name="tickfield" rows="5" cols="100"> cool</textarea>
</form>
<button onclick="doTyping()">开始打字</button>  

javacript:

var str = "罗斯参加了全场个人训练,期间他与骑士助教和训练师们共同进行了一些小规模的对抗训练。\罗斯说道:“我感觉不错,每天都在跑动,每天都在调整身体状态。我没再感到任何疼痛了,也没有出现任何伤情反复。每一天,每一周我都在取得进展,所以我处于正确的轨道之中";
var i = 0 ;
var interId = null;
function typing(){
    var textField  = document.tickform.tickfield;
    if(i <= str.length){
        console.log(str.slice(0,i++)); //截取从0 到当前位置
        textField.value = str.slice(0,i++) + "_";


    }else{//字已打完

        textField.value = str;
       window.clearInterval(interId);//清除定时器
    }
}
function doTyping(){
    interId = setInterval("typing()",200);
}



二、跑马灯效果: 

var id ,pause = 0 ,posit = 0;
function banner(){
    var i,k;
    var msg = "你好,欢迎使用JavaScript,这里介绍文字的跑马灯效果";
    var speed = 10;
    var xc = document.tickform.tickfield;
    xc.value = msg.substr(posit,posit + 160); //从postion 开始截取 而后赋值
    console.log(xc.value);
    if(posit ++ == msg.length){
        posit = 0 ;
    }
    id = setTimeout("banner()",2000/speed);
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/909

css实现开关效果

我们使用<input type=\\\\\\\"checkbox\\\\\\\">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭;on:打开 off:关闭;开始画出off、on状态的草图

纯代码为网站站点添加雪花飘落效果

网站站点添加雪花飘落效果,本段js代码依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey 。代码如下:

纯css实现彩虹效果

实现思路:使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起;after伪元素写投影样式;彩虹和投影都有动画,用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC),关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么

js实现放烟花效果

一个box中,点击其中的任意位置,会有烟花从正下方升起到点击处,并燃放出一圈圆形的烟花。代码如下:首先是布局以及样式:只给一个盒子的布局,燃放的烟花以及绽放的小烟花都是中js代码中创建。

CSS :placeholder-shown伪类实现Material Design占位符交互效果

Material Design风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见,相信不少人设计项目中有实现过这种交互,而且,大部分是利用JS实现的。(ps:weex 不支持这个样式)

js实现拖拽效果

定义全局变量用于接收鼠标坐标的变量,事件的执行函数,事件的执行函数自带参数e。自带参数e注意:div元素要设置定位才可以进行移动。

遮罩层镂空效果的多种实现方法

原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

js实现文字上下滚动效果

做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。 要点提示: 1、特效初始化代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!