一、Js实现单行文本的滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

//实例：单行文本框中的文本，实现左右滚动

/*

分析结果：

    （1）有一个单行文本框来实现动画

    （2）网页一加载完，就开始执行动画

    （3）文本向右走的思想：在文本前加空格，一次加一个

    （4）文本向右走的边界：文本和空格的总长度等于文本框的宽度时，向左运动

    （5）文本向走的思想：每次删除一个空格，通过提取字符串substr(1)

    （6）文本向左走的边界：清除空格后的长度＝＝原始字符串长度，则向右运动

    （7）设置定时器

*/

//变量初始化

var str = "北京今天又下大雨了";

var len = str.length;

var dir = "right"; //文本运行的方向，默认向右

function textAni()

{

    //获取到单行文本框的对象

    var obj = document.getElementById("result");

    //动画根据方向运行

    if(dir == "right")

    {

        //加了空格后的新的字符串

        str = " "+str;

        //将新的字符串，写入到id=result里

        obj.value = str;

        //判断是否到达右边界，如果到达右边界，更改运行方向

        if(str.length == 33)

        {

            dir = "left";

        }

    }else if(dir == "left")

    {

        //每次提取从字符串中提取，索引号为1提取，为0则不要

        str = str.substr(1);

        //将新的字符串，写入到id=result

        obj.value = str;

        //判断是否到达左边界

        if(str.length == len)

        {

            dir = "right";

        }

    }

    //定时器

    window.setTimeout("textAni()",100);

}

</script>

</head>

<body onload="textAni()">

<input type="text" id="result" value="北京今天又下大雨了" size="40" />

</body>

</html>

001.JS特效的更多相关文章

  1. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  2. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  3. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  4. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  5. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. 又到圣诞节，让你的网页下起雪(js特效)

    又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...

  8. 很不错的js特效

    这里有好多的js特效:http://www.jsfoot.com/jquery/images/qh/ jquery图片特效 jquery幻灯片 .... 有什么js需要可以到这里来下载:http:// ...

  9. 个人网站html5雪花飘落代码JS特效下载

    如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...

随机推荐

  1. vim使用手册出现 找到 tag：1/9或更多 查看别的定义的方法

    :ts 或 tselect 查看有相同地方的定义 通过这种方式会出现一个列表,输入:q 然后通过数字键和回车查看某一个定义,个人经常用:ts :tn或tnext 查找下一个定义地方. :tp 查找上一 ...

  2. css3的渐变效果

    1.css3 渐变的属性 例子: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ back ...

  3. RK3288 GPIO 输出问题【转】

    本文转载自:http://m.blog.csdn.net/jiangdou88/article/details/50158673 #define GPIO_BANK0              (0 ...

  4. BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4956(它放在题库后面的格式有一点点问题啦,所以就把它粘下来,方便读者观看) 题目意思:给出一个范围 [ ...

  5. lucene 5的测试程序——API变动太大

    package hello; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import ...

  6. codeforces 669D D. Little Artem and Dance(乱搞题)

    题目链接: D. Little Artem and Dance time limit per test 2 seconds memory limit per test 256 megabytes in ...

  7. SQL查询速度

    查询速度 https://www.cnblogs.com/ZaraNet/p/9558272.html 影响你的查询速度的原因是什么? 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不 ...

  8. 《算法概论》第八章的一些课后题目 关于NP-Complete Problem

    8.3 STINGY SAT STINGY SAT is the following problem: given a set of clauses (each a disjunction of li ...

  9. Linux下PostgreSQL 的安装与配置

    一.简介 PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS),也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统.有些特性甚至连商业数据库都不具备.这个起源于伯克 ...

  10. Spring 3.1新特性之一：使用Spring Profile和Mybatis进行多个数据源（H2和Mysql）的切换

    最近在做WebMagic的后台,遇到一个问题:后台用到了数据库,本来理想情况下是用Mysql,但是为了做到开箱即用,也整合了一个嵌入式 数据库H2.这里面就有个问题了,如何用一套代码,提供对Mysql ...