一、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. (C/C++)register关键字

    register:这个关键字的作用是请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率. 注意是尽可能,不是绝对.一个CPU 的寄存器也就那么几个或几十个,你要是定义了 ...

  2. 哈希表---线性探测再散列（hash）

    //哈希表---线性探测再散列 #include <iostream> #include <string> #include <stdio.h> #include ...

  3. YTU 2443: C++习题 复数类--重载运算符3+

    2443: C++习题 复数类--重载运算符3+ 时间限制: 1 Sec  内存限制: 128 MB 提交: 1368  解决: 733 题目描述 请编写程序,处理一个复数与一个double数相加的运 ...

  4. 3种方法判断手机浏览器跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我 ...

  5. ODC(Orthogonal Defect Classification)简介——正交缺陷分类法

    Defect分析是软件开发和测试中一个重要的环节,ODC介绍了一种不同于大家常用的非常有效的defect分类及分析方法.这篇文章简单的向大家介绍了什么是ODC,以及如何在项目和产品开发中使用ODC来改 ...

  6. JavaScript SHA-1

    1. [文件] webtoolkit.sha1.js ~ 4KB     /****  Secure Hash Algorithm (SHA1)*  http://www.huiyi8.com/css ...

  7. Oracle：ORA-09925 and linux Read-only file system error

    今天上午有同事反映应用数据库连接不上:于是排查数据库: [oracle@db ~]$ sqlplus / as sysdba SQL*Plus: Release - Production on Thu ...

  8. Android「后台下载」Feb.24小记

    参考了CSDN上的这个文章(HERE),之前只是新开一个线程: public class DownloadThread implements Runnable{ String tarFile ; pu ...

  9. 【POJ 2752】 Seek the Name, Seek the Fame

    [题目链接] 点击打开链接 [算法] KMP 沿着失配指针扫一遍即可 [代码] #include <algorithm> #include <bitset> #include ...

  10. [laravel]phpunit

    step1.install phpunit composer.json require中增加 "phpunit/phpunit":"4.0.*" 执行 comp ...