动态文字提示一个字一个字蹦出来的 循环执行

<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<style>

.main {

width: 100%;

height: 100%;

margin: 0 auto;

max-width:480px;

margin-top:40px;

}

.menutext{

width:480px;

height:50px;

font-size:20px;

line-height:50px;}

</style>

</head>

<body>

<div class="main">

<div class="menutext"></div>

</div>

<script>

//动态文字提示一个字一个字蹦出来的 循环执行

var txtArr = [‘请输入您的问题......‘],

x = 1,

y = 0,

txt = txtArr[y],

timer = null,

timer1 = null,

cue = $(‘.menutext‘);

function changTxt() {

if (x == txt.length+1) {

clearTimeout(timer1);

timer1 = setInterval(function(){

y += 1;

if (y > txtArr.length - 1) y = 0;

cue.text(‘‘);

txt = txtArr[y];

x=0;

},3000);

}

cue.text(txt.substring(0,x));

x+=1;

clearTimeout(timer);

timer = setTimeout(function(){

changTxt();

},600);

}

changTxt();

</script>

</body>

</html>

时间: 2024-08-06 07:57:57

动态文字提示一个字一个字蹦出来的 循环执行的相关文章

css3购物网站商品文字提示实例

css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物网站商品文字提示</title> <style type="te

jQuery实现的简单文字提示效果模拟title(转)

来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <!-- 引用jQuery --> <script src="jquery.js" type="text/javascript"></script> <style type="text/c

HTML5 Placeholder实现input背景文字提示效果

这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息. 语法基本是这个样子:<input placeholder=”提示信息...”> HTML代码 <form> <input

WPF 设置TextBox为空时,背景为文字提示。

<TextBox FontSize="17" Height="26" Margin="230,150,189,0" Name="txt_Account" VerticalAlignment="Top" Foreground="Indigo" TabIndex="0" BorderThickness="1"> <TextBox.Re

自定义超链接文字提示效果

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快,更加美观的优点~ 1 /* 超链接文字提示 */ 2 $(function(){ 3 var x = 10; 4 var y = 20; 5 $("a.tooltip").mouseover(function(e){ 6 this.myTitle = this.title; 7 this.title = ""; 8 var tooltip = "<div id='tooltip'>&q

input的value文本输入框文字提示样式

一.value="请输入你要搜索的关键词" onfocus="if (this.value=='请输入你要搜索的关键词') this.value='';" 二.value="请输入你要搜索的关键词" onblur="if(this.value==''){this.value='请输入你要搜索的关键词'}" onfocus="this.value=''" value="请输入你要搜索的关键词&quo

实现password框中显示文字提示的方式

其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

变色的动态文字

变色的动态文字,文字一边变色一边切换的效果,简单文字颜色变换,用在网页上挺不错的效果,希望大家喜欢. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>石家庄油漆</TITLE> </HEAD> <body bgcolor="#ffffff" onLoad="fa

进度条、输入框文字提示、图片延迟加载、吸顶条

进度条:                            window.onload=function(){                                            var oBox1=document.getElementById("box1");                                            var oBox2=document.getElementById("box2");