文字自动播放效果
一直想用脚本做一款文字广告,有幸这几天逛”代码市场”里看到一款类似的效果,于是把它从网站上分离出来,脚本进行了优化。这款效果基于jQuery,类似的效果有很多,比如一些文字slider。我特别喜欢它的随着文字播放背景色彩也会进行切换,如果把它加工完善后可以完成一幅纯文本的广告效果。一起来看下是如何制作的吧,文章最后提供免费下载。
Step1. HTML代码
<section class="demo">
<div class="home-typer">
<input value="i like css" type="text">
</div>
</section>
Step2. 脚本和jQuery
(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')
}
})
#1
效果不错,撒花!
被你说不错,说明是真的不错!
#2
记得论坛帖子经常用这个效果,不过没看是什么方法实现的。。
恩,其实还蛮简单的,不过脚本都重新组装过就很难扒了。
#3
好东西。
#4
为啥你的网页都写的这么漂亮。。
用户需要嘛
#5
强大。
#6
是不是可以集成到wp主题里,做成一个公告栏之类的notice
you give me a new idea just now! I’m on it!
#7
做公告性的文字效果很好。
本站被恶意攻击?