jQuery实现文字自动播放功能

时间：2013-06-04 17:27 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>



<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
    margin: 0;
    padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}   
img{
	border: none;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* DEMO HEADER */
body{
	font: 12px/20px "Droid Sans",Arial,"Helvetica Neue","Lucida Grande",sans-serif;
	color: #444;
	border-top: 3px solid #444;
	background:url(../img/texture.jpg) repeat;
	overflow-x:hidden;
}
h1.title_name {
    color: #685440;
    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
    font-size: 3em;
    font-weight: normal;
    line-height: 1em;
    margin: 0;
    padding: 10px 0 0;
    text-align: center;
	background-color:#404853;
}
h1.title_name span {
    color: rgba(255, 255, 255, 0.9);
    font-family: normal Georgia,'Times New Roman',Times,serif;
    font-size: 1em;
}
h1.title_name small {
    color: #8EC63F;
    display: block;
    font-family: normal Verdana,Arial,Helvetica,sans-serif;
    font-size: 0.3em;
    letter-spacing: 0.5em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
a{
	color:#FFFFFF;
	text-decoration:none;
}
a:hover{
	color:#8EC63F;
	text-decoration:none;
	-webkit-transition: color .25s ease-out;
	-moz-transition: color .25s ease-out;
	-o-transition: color .25s ease-out;
	transition: color .25s ease-out;
}
/* DEMO BODY */
footer {
	width:100%;
	bottom:0;
	position: absolute;
	padding:10px;
	text-align: center;
	clear: both;
	background:#404853;
	overflow:hidden;
}
footer p { 
	letter-spacing:2px; 
	color:#8C9198;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
footer p a { letter-spacing:0;}
#container { margin: 15em auto 0;}

/* DEMO STAR */
.demo-wrapper {
	width:100%;
	text-align:center;
}
.demo {
    background: #3BC492;
	padding: 50px 0;
    transition: background 3.5s ease-out 0s;
}
.demo:hover .demo:hover label,
.home-typer input:focus ~ .home-typer input:focus ~ label,
.demo.active .demo.active label {
	opacity: 1;
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
}
.home-typer {
	width: 50%;
	height: 100%;
	display: table-cell;
	color: white;
	-webkit-transition: all 0 ease-out; 
	}
  .home-typer input {
	width: 800px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 60px;
    height: auto;
    padding: 0 0 0 1px;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none; }
    @media only screen and (max-width: 700px) {
      .home-typer input {
        font-size: 50px; } }
    @media only screen and (max-width: 500px) {
      .home-typer input {
        font-size: 32px; } }
    .home-typer input:focus {
      border: none;
      padding: 0 0 0 1px; }
</style>
<title>文字自动播放</title>
</head> 
<body> 
<header>
     <h1 class="title_name"><span>jQuery实现文字自动播放功能</span><small>by airoschou</small></h1>
 </header>    
<div id="container">
<div class="demo-wrapper">
        <section class="demo">
            <div class="home-typer">
                <input value="i like css" type="text">
            </div>
        </section>
</div>    
</div> 
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js"></script>
<script>
(function () {
  function Word (selector, sayings) {
    this.elem = selector.nodeType ? selector : document.querySelector(selector)
    this.sayings = (sayings || []).slice(0)
    this._listeners = {}
    return this
  }
  Word.prototype.run = function(sayings) {
    var el = this.elem
    this.sayings = sayings || this.sayings
    if (this.sayings.length) {
      var saying = this.sayings.shift().split('')
      this.text('')
      this.emit('linestart')
      this.type(saying)
    } else {
      this.stop()
    }
    return this
  }

Word.prototype.type = function(saying) {
    var self = this
      , el = this.elem
    if ((typeof saying).toLowerCase() === 'string') {
      saying = saying.split('')
    }

if (saying.length > 0) {
      this.text(this.text() + saying.shift())
      this.letterTimer = window.setTimeout(function () { self.type(saying) }, random_number(100, 150))
    } else {
      this.emit('linefinish')
      if (!this.sayings.length) this.emit('finish')
      this.sayingTimer = window.setTimeout(function(){ self.run() }, 1400)
    }
    this.emit('lineenter')
    return this
  }

Word.prototype.text = function (text) {
    var el = this.elem
      , input = (el.nodeName.toLowerCase() === 'input')
    if (text === undefined) {
      return input ? el.value : el.innerHTML
    } else {
      if (input) el.value = text
      else el.innerHTML = text
      return this
    }
  }

function random_number (min, max) {
    return Math.round(Math.random() * (max - min + 1)) + min
  }

Word.prototype.on = function (e, fn) {
    (this._listeners[e] = this._listeners[e] || []).push(fn)
    return this
  }

Word.prototype.emit = function (e) {
    var listeners = this._listeners[e]
      , args = [].slice.call(arguments, 1)

if (listeners) {
      for (var i = 0, len = listeners.length; i < len; i += 1) {
        listeners[i].apply(this, args)
      }
    }

return this
  }

function word (selector, sayings) {
    return new Word(selector, sayings)
  }

window.Word = word

})();

$(function () {

var typer = $('.home-typer input')
  //输入的文字	
  var sayings = [
      "is",
      "a sharing web design",
	  "and development",
	  "resources and tutorials",
	  "personal blog",
	  "welcome to my blog -",
	  "ilikecss.com"
    ]
    , colors = ['#3dbfd9', '#88c800', '#febc06', '#cc6601', '#866cba'] //切换的颜色设置
    , length = 0

//变换背景颜色
  if (document.querySelector('.home-typer input')) {
    var typewriter = Word('.home-typer input', sayings)
      .on('linestart', function () {
        var demo = $('.demo');
        if (length === colors.length) length = 0;
        demo.css('background', colors[length]);
        length++;
      }).on('lineenter', function(){
        if(typeof ss_legacy == 'function') ss_legacy(typer)
      })
      .on('finish', function(){
        var demo = $('.demo')
        demo.addClass('active')
        setTimeout(function () {
          typewriter.run(sayings.slice(0))
          demo.removeClass('active')
        }, 3200)
      })

setTimeout(function(){
      typewriter.run()
    }, 1400)

if(typeof ss_legacy == 'function') {
      typer.keyup(function() {
        ss_legacy(typer);
      })
    }
  }
  
  function updateSlider (slideAmount) {
    var slide_amount = this.value
    $('.home-typer input').css('font-size', slide_amount+'px')
  }
})
</script>
<script type="text/javascript"> 
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5ba3cdaf3cd432d10c61c4fb73b69ab9' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

使用jQuery制作一款文字自动播放的效果，其实看上去更像是打字的效果，引入了jQuery文件，代码量较多，不过兼容性各方面都考虑了，如果不考虑兼容性，代码还可继续优化。 jQuery实现文字自动播放功能由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/wenzi/5150.html

标签：网站源码