• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

悬停滚动文本div并返回第一个元素

JavaScript 来源:Digital site 3次浏览

如何用鼠标悬停而不是重复自己,用另一个文本替换“home”按钮?悬停滚动文本div并返回第一个元素

<ul class="topnav"> 
<li><a href="#">Home</a></li> 
</ul> 


jQuery(function($) { 

    $('.topnav li').find('a[href]').parent().each(function(span, li){ 
     li = $(li); span = $('<span>' + li.find('a').html() + '<\/span>'); 
     li.hover(function(){ 
     span.stop().animate({marginTop: '-60'}, 250); 
     }, function(){ 
     span.stop().animate({marginTop: '0'}, 250); 
     }).prepend(span); 
    }); 

}); 

这里是例子:http://jsfiddle.net/fxdigi/3YNHp/1/


===========解决方案如下:

检查我的变种http://jsfiddle.net/3YNHp/5/

它使用的标记:

<ul class="topnav"> 
    <li> 
     <a href="#" data-hover-text="Mohe">Home</a> 
    </li> 
</ul> 

而改变的javascript

$('.topnav li').find('a[href]').parent().each(function() { 
    var li = $(this), 
     a = li.find('a'), 
     span = $('<span>' + a.data('hover-text') + '<\/span>'); 

    li.hover(function() { 
     a.stop().animate({marginTop: '-64'}, 250); 
    }, 
    function() { 
     a.stop().animate({marginTop: '0'}, 250); 
    }) 
    .append(span); 
}); 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)