一、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. mysql优化-------Myisam与innodb引擎,索引文件的区别

    Myisam与innodb引擎,索引文件的区别: innodb的次索引指向对主键的引用. myisam的次索引和主索引都指向物理行. myisam一行一行的插入,会产生一行一行的文件,磁盘上有数据文件 ...

  2. SQL 和 NoSQL 比较

    定义: SQL (Structured Query Language) 数据库,指关系型数据库.主要代表:SQL Server,Oracle,MySQL(开源),PostgreSQL(开源). NoS ...

  3. linux内核的三种主要调度策略

    linux内核的三种主要调度策略: 1,SCHED_OTHER 分时调度策略, 2,SCHED_FIFO实时调度策略,先到先服务 3,SCHED_RR实时调度策略,时间片轮转 实时进程将得到优先调用, ...

  4. Python小练习_数据库表数据导出到excel

    需求:只要传入一个表名,就能把所有的数据导入出来,字段名是excel的表头 1.要动态获取到标的字段 cur.descrption能获取到表的字段 fileds = [filed[0] for fil ...

  5. php判断某个变量是否存在

    sset— 检测变量是否设置,empty — 检查一个变量是否为空(是否存在也检测了,不存在或为空返回true)

  6. UIFont 字体样式 [UIFont fontWithName~];

    设置字体样式代码:[UIFont fontWithName:@"Arial-BoldMT" size:15] 下边一一列举: 一:Font Family: American Typ ...

  7. 机器学习 Hidden Markov Models 2

    Hidden Markov Models 下面我们给出Hidden Markov Models(HMM)的定义,一个HMM包含以下几个要素: ∏=(πi)表示初始状态的向量.A={aij}状态转换矩阵 ...

  8. [Selenium] common functions comparison

    1.Wait for element  in default time or self defined time When the element need some time to be prese ...

  9. 微信小程序在线制作 自己制作微信小程序

    小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...

  10. python之路，day6-面向对象

    一.面向过程编程 简单的说就是:如果你只是写一些简单的脚本,去做一些一次性任务,用面向过程的方式是极好的,但是如果你要处理的任务比较复杂,且需要不断迭代和维护的,那还是用面向对象最方便了. 二.面向对 ...