分页显示的明星专栏jquery特效

分页显示的明星专栏jquery特效

分页显示的明星专栏jquery特效

分页显示的明星专栏jquery特效

源码介绍

首先引用文件

               

核心代码

$('#star dl dt').each(function(i){ 
        $(this).css('background','url(images/starimg.jpg) 0 ' + i * -61 +'px no-repeat').parent().attr('i',i); 
    }); 
 
    var starHoverT; 
    $('#star').delegate('dl','mouseenter',function(){ 
        clearTimeout(starHoverT); 
        var n = $('#star dl:visible').index($(this)),h = $(this).attr('h'),i=$(this).attr('i'); 
        starHoverT = setTimeout(function(){ 
            if($('#starHover').css('width') != '0px'){ 
                var curY = $('#starHover').css('top').replace('px',''); 
                var oneY = curY > n * 87 ? 24 : 10
                twoY = oneY == 10 ? 24 : 10
                $('#starHover').stop().animate({'top':n * 87 - oneY},100).animate({'top':n * 87 - twoY},100).animate({'top':n * 87 - 18},50); 
            }else{ 
                $('#starHover').css({'top':n * 87 - 18}).html(''); 
                $('#starHover').animate({'width':226},200); 
            } 
            $('#starHover b').css('margin-top',i * -127).parent().attr('href',h); 
        },200); 
    });


分享到 :
简洁的jQuery弹窗插件dialog
上一篇 2018-05-03 12:50:16
html5 svg不规则棱形背景动画特效
2018-05-22 08:58:53 下一篇

发表评论

登录... 后才能评论