Question

我试图创建一个文本字段，无论有人输入它都会产生影响，好像字母会掉下来一样。以下是fallingtextrotator.js

效果的代码

(function($){

var defaults = {pause:2000, ontextchange:function(msgindex, msg, $eachchar){}, cycles:1}
var transitionsupport = typeof $(document.documentElement).css('transition') != 'undefined'

$.fn.fallingtextrotator = function(options){

    return this.each(function(){
        var s = $.extend({}, defaults, options)
        var $t = $(this),
                wordgroup = [], // array holding collection of either words or chars (depending on setting)
                curli = 0,
                cyclescount = {cur:0, max:0}
        var $lis = $t.find('>li').each(function(i){
            var $this = $(this)
                .data('wrapperinfo', {wrapitem:i, transduration:$(this).css('transitionDuration'), currenttransition:0, wordcount:0})
                .lettering('words').children('span').lettering().end()
            wordgroup.push( $this.find('span[class*="char"]') )
            $this.data('wrapperinfo').wordcount = wordgroup[i].length
        })
        cyclescount.max = $lis.length * s.cycles // get number of literations before rotator should stop

        $t.on('transitionend webkitTransitionEnd', function(e){
            var $target = $(e.target),
                    $targetParent = $target.offsetParent()
            if (/transform/i.test(e.originalEvent.propertyName) && $targetParent.hasClass('dropdown')){
                $targetParent.data('wrapperinfo').currenttransition += 1
                if ($targetParent.data('wrapperinfo').currenttransition == $targetParent.data('wrapperinfo').wordcount){
                    $targetParent.data('wrapperinfo').currenttransition = 0
                    wordgroup[curli].css({transitionDelay:'0ms'})
                    $targetParent.css({opacity:0, transitionDuration:'0ms'}).removeClass('dropdown')
                    s.ontextchange( curli, $targetParent.text(), wordgroup[curli] )
                    curli = (curli < wordgroup.length-1)? curli + 1 : 0
                    setTimeout(function(){rotatetext()}, 50)
                }
            }
        })


        function dropword(){
            if (transitionsupport && !window.opera){
                for (var i=0; i<wordgroup[curli].length; i++){
                    var delay = Math.round( Math.random() * 1000 ) +'ms'
                    wordgroup[curli].eq(i).css('transitionDelay', delay )
                }
                $lis.eq(curli).addClass('dropdown')
            }
            else{
                $lis.eq(curli).css({opacity:0})
                curli = (curli < wordgroup.length-1)? curli + 1 : 0
                rotatetext()
            }
        }

        function rotatetext(){
            var $curli = $lis.eq(curli)
            $curli.css({opacity:1, transitionDuration:$curli.data('wrapperinfo').transduration})
            if (s.cycles==0 || cyclescount.cur++ < cyclescount.max-1){
                setTimeout(function(){
                    dropword()
                }, s.pause)
            }
        }

        rotatetext()
    }) // end this.each()
}
})(jQuery)

以下是我在index.html中的html代码

<html>
<head>
<link rel="stylesheet" type="text/css" href="fallingtextrotator.css" />
<link href="jquery-sakura.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Orbitron:400,700,900' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="jquery.lettering-0.6.1.min.js"></script>

<script src="fallingtextrotator.js">
<script>


jQuery(function(){ // on DOM load

	$('#headline').fallingtextrotator({
		pause: 3000,
		cycles: 2,
		ontextchange:function(msgindex, msg, eachchar){
			//console.log(msgindex, msg, eachchar)
		}
	})
})

</script>
<script type="text/javascript">
      $(document).ready(function() {
        $(document).keydown(function(e) {
          if (e.keyCode == '32' || e.keyCode == '0') {
            alert('space');
          }
        });
      });
    </script>
</head>
<body background-image: url("pic.jpg"); background-color: #cccccc;>
<ul id="headline" class="fallingtextrotator" style="height:2em">
<li>These are the falling text</li>
<li>Whatever you will write will fall down</li>
<li>Check it</li>
</ul>
</body>
</html>

在创建文本字段时需要帮助，无论何时按下空格键按钮，在下降之前输入的文本。

在文本字段中为输入的值设置动画

0 个答案: