jquery洗牌文本输出插件shuffleText js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery洗牌文本输出插件shuffleText js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8" />
    <!-- Title & Favicon -->
    <title>jquery洗牌文本输出插件shuffleText</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- Scripts -->
    <script type="text/javascript" src="js/jquery-min.js"></script>
    <script type="text/javascript" src="js/jquery.shuffleText.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
    <h1>JQuery Shuffle Text 1.0</h1>
    <div class="inner">
        <p>
            <strong>JQuery Shuffle Text</strong> is a lightweight jQuery plugin able to shuffle any of your text content. Easy to use, it offers a set of settings to customize it.
            Here is a demonstration of this plugin with <strong>default settings</strong> to see it in action...
        </p>
        <div>
            <form method="post" action="">
                <input type="text" id="entry" placeholder="在这里输入文字..." autofocus />
                <input type="submit" value="点击这里" />
            </form>
            <blockquote>输出结果演示</blockquote>
        </div>
    </div>
</body>
</html>

JS代码(functions.js):

$(document).ready(function(){
	var target = $('blockquote');
	$('form').submit(function(e){
	e.preventDefault();
	target.shuffleText($('#entry').val());
}
);
}
);

JS代码(jquery.shuffleText.js):

/* * Shuffle Text Plugin 1.0 * Created by Anthony Du Pont * http://www.anthonydupont.be */
(function ($){
	var isActive = false;
	$.fn.shuffleText = function(shuffleResult,options){
	var $this = $(this);
	// Add/Remove Chars You Want To Appear During Shuffle In This Array var aChars = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","k","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
	// Defaults Settings var defaults = $.extend({
	frames:40,// Duration In ms (Milliseconds) Of Shuffle For Each Letter maxSpeed:1000,// Max Duration In ms (Milliseconds) Of Global Shuffle amount:3,// Amount Of Shuffle For Each Letter complete:null // Do Something When Shuffle Is Completed}
,options);
	if(shuffleResult == undefined) shuffleResult = '';
	// Init Variables var aToShuffle = $this.text().split(''),aShuffleResult = shuffleResult.split(''),iFlag = 0,n = 0,duration = 0,iLenght = 0,interval,aLetters;
	if(!isActive){
	isActive = true;
	// Launch Shuffle return $this.each(function(){
	replaceEntry();
	aLetters = $this.find('span');
	// Debugging if(defaults.amount < 0) defaults.amount = 0;
	// Calculate Duration Of Global Shuffle if((iLength * (defaults.amount + 1) * defaults.frames) > defaults.maxSpeed){
	duration = defaults.maxSpeed / (iLength * (defaults.amount + 1));
}
else{
	duration = defaults.frames;
}
randomChars();
	interval = setInterval(randomChars,Math.floor(duration));
	// Create The Correct DOM Structure function replaceEntry(){
	$this.empty();
	if(aToShuffle.length > aShuffleResult.length) iLength = aToShuffle.length;
	else iLength = aShuffleResult.length;
	for(i = 0;
	i < iLength;
	i++){
	if(aToShuffle[i] == undefined) $this.append($('<span></span>'));
	else $this.append($('<span>'+aToShuffle[i]+'</span>'));
}
}
// The Shuffle Function function randomChars(){
	var randomChars = aChars[Math.floor(Math.random() * aChars.length)];
	if(iFlag >= iLength){
	isActive = false;
	$this.text(shuffleResult);
	clearInterval(interval);
	if(typeof defaults.complete == 'function') defaults.complete.call($this);
}
else{
	if(n == defaults.amount){
	if(iFlag >= aShuffleResult.length) $(aLetters[iFlag]).text('');
	else $(aLetters[iFlag]).text(aShuffleResult[iFlag]);
	iFlag++;
	n = 0;
}
else{
	$(aLetters[iFlag]).text(randomChars);
	n++;
}
}
}
}
);
}
}
;
}
(jQuery));

CSS代码(style.css):

/* line 17,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}
/* line 22,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html{line-height:1;}
/* line 24,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol,ul{list-style:none;}
/* line 26,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table{border-collapse:collapse;border-spacing:0;}
/* line 28,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}
/* line 30,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q,blockquote{quotes:none;}
/* line 103,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}
/* line 32,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img{border:none;}
/* line 116,../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
/* line 11,../scss/style.scss */
body{background:#FFF;-webkit-font-smoothing:antialiased;}
/* line 15,../scss/style.scss */
.inner{width:750px;height:auto;margin:0 auto;}
@media only screen and (max-width:750px){/* line 15,../scss/style.scss */
 .inner{width:100%;padding:0 40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
}
/* line 25,../scss/style.scss */
a{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/* line 28,../scss/style.scss */
h1{padding:30px 0;margin-bottom:50px;background:#ff6860;font:700 20px/20px "proxima-nova",sans-serif;color:#FFFFFF;letter-spacing:1px;text-transform:uppercase;text-align:center;text-shadow:0 1px 0 #ff5047;}
/* line 38,../scss/style.scss */
p{margin:0 auto 100px;font:400 14px/24px "Helvetica","Arial",sans-serif;color:#4D4D4D;text-align:center;}
/* line 43,../scss/style.scss */
p strong,p a{font-weight:bold;color:#ff6860;}
/* line 47,../scss/style.scss */
p a{text-decoration:none;border-bottom:1px solid #E8E8E8;}
/* line 52,../scss/style.scss */
div{text-align:center;}
/* line 55,../scss/style.scss */
blockquote{display:inline-block;padding:10px 20px;margin-bottom:100px;background:#F8F8F8;font:700 30px/34px "proxima-nova",sans-serif;color:#ff6860;letter-spacing:1px;text-align:center;}
@media only screen and (max-width:500px){/* line 55,../scss/style.scss */
 blockquote{font-size:24px;line-height:28px;}
}
/* line 68,../scss/style.scss */
form{position:relative;width:400px;margin:0 auto 40px;text-align:left;}
/* line 73,../scss/style.scss */
form input[type="text"]{width:300px;padding:0 0 10px;background:transparent;border:none;outline:none;border-bottom:1px solid #E9E9E9;font:400 20px/20px "Helvetica","Arial",sans-serif;color:#4D4D4D;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
/* line 87,../scss/style.scss */
form input[type="submit"]{position:absolute;right:-2px;top:-6px;padding:12px 15px;background:transparent;border:2px solid #ff6860;outline:none;font:700 12px/12px "proxima-nova",sans-serif;color:#ff6860;text-transform:uppercase;text-align:center;text-decoration:none;letter-spacing:1px;cursor:pointer;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;border-radius:0px;-webkit-appearance:none;-webkit-font-smoothing:antialiased;}
/* line 105,../scss/style.scss */
form input[type="submit"]:hover{color:#FFFFFF;background:#ff6860;text-shadow:0 1px 0 #ff5047;}
@media only screen and (max-width:500px){/* line 68,../scss/style.scss */
 form{width:100%;}
/* line 116,../scss/style.scss */
 form input[type="text"]{width:100%;}
/* line 119,../scss/style.scss */
 form input[type="submit"]{position:relative;top:0;left:0;margin-top:5px;padding:12px 0;width:100%;}
}
/* line 128,../scss/style.scss */
.button{display:block;max-width:220px;margin:0 auto 100px;padding:15px 0;border:2px solid #ff6860;font:700 12px/12px "proxima-nova",sans-serif;color:#ff6860;text-transform:uppercase;text-align:center;text-decoration:none;letter-spacing:1px;}
/* line 138,../scss/style.scss */
.button:hover{color:#FFFFFF;background:#ff6860;text-shadow:0 1px 0 #ff5047;}
/* line 146,../scss/style.scss */
footer p{font-size:12px;}
/* line 148,../scss/style.scss */
footer p span{-webkit-font-smoothing:auto;}
/* line 151,../scss/style.scss */
footer p a{font-weight:400;-webkit-font-smoothing:auto;}
/* line 155,../scss/style.scss */
footer p a:hover{color:#4D4D4D;}

附件:下载该文件资源,减少时间成本(增值服务)