(function($) { $.fn.dynamo = function() { return this.each(function(i, v) { var delay = parseInt($(v).attr('data-delay')) || 3000; var speed = parseInt($(v).attr('data-speed')) || 350; var lines = $(v).attr('data-lines').split(','); // wrap the original contents in a span $(v).html($('<span></span>').text($(v).text())); // grab the width of the span var max = $(v).find('span:eq(0)').width(); // for each item in data-lines, create a span with item as its content // compare the width of this span with the max for (var k in lines) { var span = $('<span></span>').text(lines[k]); $(v).append(span); max = Math.max(max, $(span).width()); } // replace all the spans with inline-div's $(v).find('span').each(function(i, el) { var s = $(el).remove(); var d = $('<div></div>').text($(s).text()); $(d).width(max); $(v).append(d); }); // set the height of the dynamo container var height = $(v).find('>:first-child').height(); // style $(v).width(max).height(height); $(v).css({ 'display': 'inline-block', 'position': 'relative', 'overflow': 'hidden', 'vertical-align': 'bottom', 'text-align': 'left' }); // manually center it if we need to if ($(v).attr('data-center')) $(v).css('text-align', 'center'); // now, animate it var transition = function() { $(v).find('div:first').slideUp(speed, function() { $(v).append($(this).remove().show()); }); }; setInterval(transition, delay); }); }; })(jQuery); $('.dynamo').dynamo();
body { background-image: url('../images/cross_scratches.png'); } #content { background-color: #fff; width: 900px; margin-left: auto; margin-right: auto; padding: 35px; position: relative; top: -50px; -moz-box-shadow: 0 0 8px 8px #aaa; -webkit-box-shadow: 0 0 8px 8px #aaa; box-shadow: 0 0 8px 8px #aaa; } #welcome-mat { text-align: center; margin: 50px auto 0 auto; } #welcome-mat h1 { font-size: 90px; line-height: 100px; } #welcome-mat p { margin-top: 10px; font-size: 30px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; line-height: 35px; } #welcome-mat #buttons { margin-top: 25px; } p { font-size: 120%; line-height: 20px; } h1 { margin-bottom: 20px; } .example { height: 90px !important; margin: 15px 0; } div.example { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 8px; border: 1px solid #aaa; } code { color: #222; } li { line-height: 30px; } .foot { font-size: 100%; float: right; }
<p>今日の天気は<span class="dynamo" data-lines="あめ,曇り,微妙" data-delay="2000">晴れ</span>です。私は<span class="dynamo" data-lines="大阪出身,新潟出身,帰りたい">東京出身</span>です。</p> <p>リンクも貼れる→<a href="https://www.google.co.jp/webhp?hl=ja&tab=ww"><span class="dynamo" data-lines="グーグル,ごおgぇ" data-delay="1000" data-speed="100">Google</span></a></p>