一、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. UVA11624 Fire! —— BFS

    题目链接:https://vjudge.net/problem/UVA-11624 题解: 坑点:“portions of the maze havecaught on fire”, 表明了起火点不唯 ...

  2. Linux：NFS文件共享问题重新认识

    之前也搭建过nfs,服务器之间目录里面的文件同享也一直正常.今天有现场反映,搭建nfs后,客户端文件在服务器端看不见. 在我之前的认识里,服务器端搭建好并启动nfs服务,客户端mount后,客户端.服 ...

  3. 转：Apache-Tomcat各发布包说明

    下载地址:http://tomcat.apache.org/发布包说明: apache-tomcat-[version].zip---------------------------基本发布包.这些发 ...

  4. android广播接收器

    Android程序创建广播接收器继承BroadcastReceiver Android广播接收器需要在AndroidManifest.xml文件中声明: <recevie android:nam ...

  5. Linux系统CentOS下mysql的安装日志

    今天自己捣鼓了一下,在linux系统CentOs6.5下使用源码方式安装和配置mysql,这里记录一下步骤. a) 下载mysql,source版本.Mysql-5.6.20.tar.gz b) 安装 ...

  6. SPOJ：Collecting Candies（不错的DP）

    Jonathan Irvin Gunawan is a very handsome living person. You have to admit it to live in this world. ...

  7. Bootstrap-CSS：按钮

    ylbtech-Bootstrap-CSS:按钮 1.返回顶部 1. Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角 ...

  8. Vue.nextTick()的正确使用

    Vue异步执行DOM更新.只要观察导数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变,如果同一个watcher被多次触发,只会一次推入到队列中.这种在缓冲时去除重复数据对于避免 ...

  9. 【旧文章搬运】Windows句柄表分配算法分析(实验部分)

    原文发表于百度空间,2009-03-31========================================================================== 理论结合实 ...

  10. socket入门教程

    Server.cs   服务端程序 using System; using System.Collections.Generic; using System.ComponentModel; using ...