JQuery Shuffle Text洗牌文字特效演示实例

最新推荐文章于 2022-10-03 09:34:00 发布
春之素
最新推荐文章于 2022-10-03 09:34:00 发布
阅读量114
点赞数
分类专栏：网页特效
本文链接：https://blog.csdn.net/zhao617097537/article/details/84611888
版权
网页特效专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jquery洗牌文本输出插件shuffleText</title>
<style>
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;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
body {
  background: #FFF;
  -webkit-font-smoothing: antialiased;
}
.inner {
  width: 750px;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  .inner {
    width: 100%;
    padding: 0 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
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;
}
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;
}
p {
  margin: 0 auto 100px;
  font: 400 14px/24px "Helvetica", "Arial", sans-serif;
  color: #4D4D4D;
  text-align: center;
}
p strong,
p a {
  font-weight: bold;
  color: #ff6860;
}
p a {
  text-decoration: none;
  border-bottom: 1px solid #E8E8E8;
}
div {
  text-align: center;
}
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) {
  blockquote {
    font-size: 24px;
    line-height: 28px;
  }
}
form {
  position: relative;
  width: 400px;
  margin: 0 auto 40px;
  text-align: left;
}
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;
}
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;
}
form input[type="submit"]:hover {
  color: #FFFFFF;
  background: #ff6860;
  text-shadow: 0 1px 0 #ff5047;
}
@media only screen and (max-width: 500px) {
  form {
    width: 100%;
  }
  form input[type="text"] {
    width: 100%;
  }
  form input[type="submit"] {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 5px;
    padding: 12px 0;
    width: 100%;
  }
}
.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;
}
.button:hover {
  color: #FFFFFF;
  background: #ff6860;
  text-shadow: 0 1px 0 #ff5047;
}
footer p {
  font-size: 12px;
}
footer p span {
  -webkit-font-smoothing: auto;
}
footer p a {
  font-weight: 400;
  -webkit-font-smoothing: auto;
}
footer p a:hover {
  color: #4D4D4D;
}
</style>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function ($) {
    var isActive = false;
    $.fn.shuffleText = function(shuffleResult, options){
        var $this = $(this);
        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");
        var defaults = $.extend({
            frames   : 40,
            maxSpeed : 1000,
            amount   : 3,
            complete : null
        }, options);
        if(shuffleResult == undefined)
            shuffleResult = '';
        var aToShuffle     = $this.text().split(''),
            aShuffleResult = shuffleResult.split(''),
            iFlag = 0, n = 0, duration = 0, iLenght = 0,
            interval, aLetters;
        if(!isActive){
            isActive = true;
            return $this.each(function(){
                replaceEntry();
                aLetters = $this.find('span');
                if(defaults.amount < 0)
                    defaults.amount = 0;
                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));
                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>'));
                    }
                }
                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));
</script>
<script type="text/javascript">
$(document).ready(function(){
   var target  = $('blockquote');
   $('form').submit(function(e){
       e.preventDefault();
       target.shuffleText($('#entry').val());
   });
});
</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>