以下是 jQuery超酷打字机效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery超酷打字机效果</title>
<style type="text/css" media="screen, projection">
#ticker {
height: 12em;
padding: 0.6em 0;
margin: 0 0 1.8em 0;
border-top: 3px solid #efefef;
border-bottom: 3px solid #efefef;
position: relative;
}
#ticker .cursor {
display: inline-block;
background: #565c61;
width: 0.6em;
height: 1em;
text-align: center;
}
#ticker p {
margin-bottom: 0.8em;
}
#ticker code {
margin: 0.4em 0.4em;
display: block;
}
#ticker .next {
position: absolute;
bottom: 1em;
}
</style>
<script type="text/javascript" SRC="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" SRC="js/jquery.jticker.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
// Instantiate jTicker
jQuery("#ticker").ticker({
cursorList: " ",
rate: 10,
delay: 4000
}).trigger("play").trigger("stop");
// Trigger events
jQuery(".stop").click(function(){
jQuery("#ticker").trigger("stop");
return false;
});
jQuery(".play").click(function(){
jQuery("#ticker").trigger("play");
return false;
});
jQuery(".speedup").click(function(){
jQuery("#ticker")
.trigger({
type: "control",
item: 0,
rate: 10,
delay: 4000
})
return false;
});
jQuery(".slowdown").click(function(){
jQuery("#ticker")
.trigger({
type: "control",
item: 0,
rate: 90,
delay: 8000
})
return false;
});
jQuery(".next").live("click", function(){
jQuery("#ticker")
.trigger({type: "play"})
.trigger({type: "stop"});
return false;
});
jQuery(".style").click(function(){
jQuery("#ticker")
.trigger({
type: "control",
cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
})
return false;
});
});
</script>
</head>
<body>
<div id="content">
<h2>jTicker Demo </h2>
<div id="ticker">
<div>
<h3>What does jTicker do?</h3>
<p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>
<p>It can be controlled with jQuery events.</p>
<a class="next" href="#">next</a>
</div>
<div>
<h3>Not my cup of tea, really, ...</h3>
<p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>
<a class="next" href="#">next</a>
</div>
<div>
<h3>jTicker has some neat features:</h3>
<ul>
<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>
<li>jTicker handles any number of alternating cursors (or just one).</li>
<li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>
<li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>
</ul>
<a class="next" href="#">next</a>
</div>
<div>
<h3>There is one caveat:</h3>
<ul>
<li>
<span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>
<code>|span| some text |/span| |a|and then a link|/a|</code>
</li>
<li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>
</ul>
<a class="next" href="#">next</a>
</div>
</div>
</div>
</body>
</html>
JS代码(jquery.jticker.js):
// jquery.ticker.js// 0.9.1 - beta// Stephen Band//// Project and documentation site:// http://webdev.stephband.info/jticker///// Dependencies:// jQuery 1.2.3 - (www.jquery.com)//// Instantiate and play with:// jQuery(element).ticker({
options}
).trigger("play");
(function(jQuery){
// VARvar name = "ticker";
// Name of the plugin// FUNCTIONSfunction indexify(i,length){
return (i >= length) ? indexify(i-length,length):((i < 0) ? indexify(i+length,length):i);
}
function advanceItem(elem){
var data = elem.data(name);
var length;
for (var i=0;
i<200;
i++){
if (!data.content[i]){
length = i;
break;
}
}
data.nextItem = indexify((data.nextItem || 0),length);
data.currentItem = data.nextItem;
data.elemIndex = [data.currentItem];
data.charIndex = 0;
data.nextItem++;
}
function makeFamily(elem){
var obj ={
elem:elem.clone().empty()}
;
var children = elem.children();
if (children.length){
children.each(function(i){
obj[i] = makeFamily(jQuery(this));
}
);
return obj;
}
else{
obj.text = elem.text() return obj;
}
}
function checkFamily(content,index){
var newIndex;
if (content[index[0]]){
if (content[index[0]].text){
return content[index[0]];
}
else if (index.length == 1){
return true;
}
else{
newIndex = jQuery.makeArray(index);
return checkFamily(content[newIndex[0]],newIndex.splice(1,newIndex.length));
}
}
else{
return false;
}
}
function incrementIndex(index){
if (index.length > 1){
index[index.length-1]++;
return index;
}
else{
return false;
}
}
function buildIndex(content,index){
if (index === false){
return false;
}
var obj = checkFamily(content,index);
if (obj === false){
return buildIndex(content,incrementIndex(index.slice(0,index.length-1)));
}
else if (obj === true){
index[index.length] = 0;
return buildIndex(content,index);
}
else{
return index;
}
}
function buildFamily(elem,content,index,data){
var newIndex,newElem;
var child = elem.children().eq(index[0]);
if (!index.length){
return{
readout:elem,text:content.text}
;
}
else if (child.length){
newElem = child;
}
else{
newElem = content[index[0]].elem.appendTo(elem);
}
newIndex = jQuery.makeArray(index).slice(1,index.length);
return buildFamily(newElem,content[index[0]],newIndex,data);
}
function initElem(elem){
var data = elem.data(name);
jQuery("*",elem).empty();
elem.empty();
data.start = 0;
data.sum = 0;
if (data.cursorIndex){
cursorIndex = 0;
}
}
function initChild(elem){
var data = elem.data(name);
data.start = data.sum;
}
function ticker(elem,threadIndex,data){
var index,letter;
// Switch cursor if (data.cursorIndex !== false){
data.cursorIndex = indexify(data.cursorIndex+1,data.cursorList.length);
data.cursor.html(data.cursorList[data.cursorIndex]);
}
else{
data.cursor.html(data.cursorList);
}
// Add character to readout index = data.charIndex - data.start;
letter = data.text.charAt(index-1);
data.cursor.before(letter);
if (data.charIndex >= data.sum){
data.cursor.remove();
data.elemIndex = incrementIndex(data.elemIndex);
return tape(elem,threadIndex);
}
else{
return setTimeout(function(){
if (data.eventIndex == threadIndex){
data.charIndex++;
ticker(elem,threadIndex,data);
}
threadIndex = null;
}
,data.rate);
}
}
function tape(elem,threadIndex){
var data = elem.data(name);
if (data.eventIndex == threadIndex){
data.elemIndex = buildIndex(data.content,data.elemIndex);
//console.log('INDEX '+data.elemIndex);
if (data.elemIndex === false){
return setTimeout(function(){
if (data.running && (data.eventIndex == threadIndex)){
advanceItem(elem);
return tape(elem,threadIndex);
}
threadIndex = null;
}
,data.delay);
}
else if (!data.charIndex){
initElem(elem);
}
else{
initChild(elem);
}
jQuery.extend(data,buildFamily(elem,data.content,data.elemIndex));
data.sum = data.sum + data.text.length;
data.readout.append(data.cursor);
return ticker(elem,threadIndex,data);
}
}
// PLUGIN DEFINITIONjQuery.fn[name] = function(options){
// Add or overwrite options onto defaults var o = jQuery.extend({
}
,jQuery.fn.ticker.defaults,options);
// Iterate matched elements return this.each(function(){
var elem = jQuery(this);
elem .data(name,{
rate:o.rate,delay:o.delay,content:makeFamily(elem),cursor:o.cursor,cursorList:o.cursorList,cursorIndex:(typeof(o.cursorList) == "object") ? 0:false,nextItem:0,eventIndex:0}
) .bind("stop",function(e){
var data = elem.data(name);
data.running = false;
}
) .bind("play",function(e){
var data = elem.data(name);
data.eventIndex++;
data.running = true;
data.nextItem = (e.item || data.nextItem);
advanceItem(elem);
tape(elem,data.eventIndex);
}
) .bind("control",function(e){
var data = elem.data(name);
jQuery().extend(data,{
nextItem:e.item,rate:e.rate,delay:e.delay}
);
}
) .children() .remove();
}
);
}
;
// PLUGIN DEFAULTSjQuery.fn[name].defaults ={
rate:40,// Speed to print message. delay:2000,// Pause to read message. cursorList:"_",// A string or an array of strings or jQuery objects. If an array,the cursor loops through the array. cursor:jQuery('<span class="cursor" />')}
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
