jquery鼠标悬停随机显示字符特效js代码

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

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

以下是 jquery鼠标悬停随机显示字符特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery鼠标悬停随机显示字符特效</title>
    <!-- Vendor js -->
    <script src="js/jquery.min.js"></script>
    <!-- chaffle js -->
    <script src="js/chaffle.min.js"></script>
    <script>

        $(document).ready(function () {
            $('.chaffle').chaffle();
        });
    </script>
</head>
<body>
    <center>
        <br><br><br><br>
        <a href="#" class="chaffle" data-lang="en">Engligh</a>
        <a href="#" class="chaffle" data-lang="zh">中文（汉字）</a>
        <a href="#" class="chaffle" data-lang="ja-hiragana">ひらがな</a>
        <a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a>
        <br><br>
        <a href="#" " class=" chaffle" data-lang="ja-katakana">jquery随机字符插件Chaffle</a>
    </center>
</body>
</html>

JS代码(plugin.js):

(function($){
	var namespace = 'chaffle';
	var methods ={
	init:function(options){
	options = $.extend({
	speed:20,//シャッフルスピード time:140 //一文字をシャッフルする時間}
,options);
	return this.each(function(){
	var _this = this;
	var $this = $(this);
	var data = $this.data(namespace);
	if (!data){
	options = $.extend({
}
,options);
	$this.data(namespace,{
	options:options}
);
}
var $text = $this.text();
	var substitution;
	//代入テキスト var shuffle_timer;
	var shuffle_timer_delay;
	//ランダムにテキストを代入 var shuffle = function(){
	$this.text(substitution);
	//$text.length = オリジナルテキストの文字数 //substitution.length = 現在の文字数（ループカウント） //オリジナルの文字数までシャッフルをループさせる //thisがシャッフル中かどうか文字数で判定 if ($text.length - substitution.length > 0){
	//thisにオリジナルの文字数があればその文字数までループ for (i = 0;
	i < $text.length - substitution.length;
	i++){
	//ランダムな文字を代入 var shuffleStr = random_text.call();
	$this.append(shuffleStr);
}
}
else{
	//シャッフル中場合などそれ以外は止める clearInterval(shuffle_timer);
}
}
//1文字遅れてオリジナルのテキストを入れていく。 var shuffle_delay = function(){
	if (substitution.length < $text.length){
	substitution = $text.substr(0,substitution.length + 1);
}
else{
	clearInterval(shuffle_timer_delay);
}
}
//ランダムに文字を取得 var random_text = function(){
	var str;
	var lang = $this.data('lang');
	switch (lang){
	case "en":str = String.fromCharCode(33 + Math.round(Math.random() * 99));
	break;
	case "ja":str = String.fromCharCode(19968 + Math.round(Math.random() * 80));
	break;
	case "ja-hiragana":str = String.fromCharCode(12352 + Math.round(Math.random() * 50));
	break;
	case "ja-katakana":str = String.fromCharCode(12448 + Math.round(Math.random() * 84));
	break;
}
return str;
}
var start = function(){
	substitution = '';
	clearInterval(shuffle_timer);
	clearInterval(shuffle_timer_delay);
	//ランダムテキストダイマー shuffle_timer = setInterval(function(){
	shuffle.call(_this);
}
,options.speed);
	shuffle_timer_delay = setInterval(function(){
	shuffle_delay.call(this);
}
,options.time);
}
//mouseover $this.unbind('mouseover.'+namespace).bind('mouseover.'+namespace,function(){
	start.call(_this);
}
);
}
);
	// end each}
,destroy:function(){
	return this.each(function(){
	var $this = $(this);
	$(window).unbind('.'+namespace);
	$this.removeData(namespace);
}
);
}
}
;
	$.fn.chaffle = function(method){
	if ( methods[method] ){
	return methods[method].apply( this,Array.prototype.slice.call( arguments,1 ));
}
else if ( typeof method === 'object' || ! method ){
	return methods.init.apply( this,arguments );
}
else{
	$.error( 'Method ' + method + ' does not exist on jQuery.'+namespace);
}
}
;
}
)(jQuery);

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