一、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. iOS 视图在不同View之间的切换（对于convertRect:函数的一些理解）

    可以通过以下函数完成坐标体系在不同View之间的切换,如下面是完成当前View向ParentView坐标的转换(一个矩阵转换)CGRect parentRect = [currentView conv ...

  2. ArrayDeque类的使用详解

    ArrayDeque是Deque接口的一个实现,使用了可变数组,所以没有容量上的限制. 同时,ArrayDeque是线程不安全的,在没有外部同步的情况下,不能再多线程环境下使用. ArrayDeque ...

  3. 取clientdataset detal中的 更新数据， 将detal 转 数据库脚本sql

    转自永南博客,更改update 脚本只取变化字段,更改排除blob与数组字段,这两个类型会报错 function vartosql(value: Variant): wideString; var  ...

  4. codeforces 450B. Jzzhu and Sequences 解题报告

    题目链接:http://codeforces.com/problemset/problem/450/B 题目意思:给出 f1 和 f2 的值,以及n,根据公式:fi = fi-1 + fi+1,求出f ...

  5. java -- 虚拟机和内存

    从大方向来分:栈内存,堆内存,方法区,本地方法栈,程序计数器 java从存储数据的角度来分: 寄存器(register):最快的存储区,由编译器根据需求进行分配,不由认为控制. 堆栈(statck): ...

  6. 使用pngcrush压缩png图片

    写在前面:         Pngcrush是一个优化的PNG(便携式网络图形)文件.它可以运行在MSDOS窗口中一个命令行,或从UNIX或LINUX命令行.其主要目的是为了 减少PNG IDAT数据 ...

  7. cocos2d-js使用plist执行自身动作

    首先需要将精灵动作帧动画图片使用TexturePacker创建plist,创建好后,将生成的plist和png图片(所有帧动画图片集成的一张大图): 百牛信息技术bainiu.ltd整理发布于博客园 ...

  8. Hibernate中两种获取Session的方式

    转自:https://www.jb51.net/article/130309.htm Session:是应用程序与数据库之间的一个会话,是hibernate运作的中心,持久层操作的基础.对象的生命周期 ...

  9. error the @annotation pointcut expression is only supported at Java 5

    eclipse搭建环境后报错 the pointcut is supported at Java 5 错误意思大致是:注释切入点表达式只支持在Java 5版本以上,我就纳闷了我安装的是jdk1.8啊, ...

  10. firefly安装步骤

    本来公司一个网游服务器端选定了pomelo框架,后来出了个Firefly,为做一个对比,决定研究一下Firefly.看了一下Firefly,感觉头大,python的,本人python小白,只好慢慢折腾 ...