这是一个很简单的jQuery滑动文字效果。插件中使用了 Lettering.js,你可以在 Github 上找到它。
HTML
<div class="sl_examples"> <a href="#" id="example1" data-hover="Creativity">Illustrations</a> </div>
使用data-hover
来表示鼠标滑过的元素。
CSS
.sl_examples{ float:left; font-family: 'Bevan', arial, serif; font-size:50px; line-height:50px; color:#f0f0f0; margin-right:5px; text-transform:uppercase; } .sl_examples a{ display:block; position:relative; float:left; clear:both; color:#fff; } .sl_examples a > span{ height:50px; float:left; position:relative; overflow:hidden; } .sl_examples a span span{ position:absolute; display:block; left:0px; top:0px; text-align:center; } .sl_examples a span span.sl-w1{ color:#fff; text-shadow:0px 0px 1px #fff; z-index:2; } .sl_examples a span span.sl-w2{ color:#e82760; text-shadow:-1px 1px 2px #9f0633; z-index:3; }
“sl-w1”表示第一个字母,“sl-w2”表示第二个字母。
调用插件:
$(window).load(function(){ $('#example1').hoverwords({ delay:50 }); });
可用参数:
delay : false, // each letter will have different animation times speed : 300, // animation speed easing : 'jswing', // easing animation dir : 'leftright', // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left, overlay : false, // hover word is slided on top of the current word (just for the case when the hover word equals word) opacity : true
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!