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

2024-09-05 12:21:35

字体：大中小

来源：转载

供稿：网友

JQuery Shuffle Text文字特效演示实例，也不像是打字效果，看上去像是洗牌效果。不过总体是动态的，还可以吧，希望有喜欢的朋友，拿出参考学习、使用都可以吧。

<!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.vevb.com/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>

上一篇：绝对酷的CSS3文字阴影特效

下一篇：Js文本文字上下弹跳