jquery插件鼠标移上去当前列表显示图片的特效

鼠标移上去时显示对应的图片信息,不过它是采用了jquery的扩展函数做的一个插件,使用起来就比之前的那个方便多了。

jquery代码:


$.fn.extend({     
   AdAdvance:function(){
	var listobj=this;
        var objs =$('dt',this);
	var view =objs.length-1;//parseInt( Math.random()*objs.length);
	objs.each(function(i){
	$(this).mouseover(function(){ $('dd',listobj).hide();$('.dropList-hover',listobj).attr("class",""); $(this).children("p").attr("class","dropList-hover");$(this).next().show()})
	if(i!=view)
	{
		$(this).next().hide();
	}
	else
	{
		$(this).next().show();
		$(this).children("p").attr("class","dropList-hover");
	}
	});
    }
});


调用方法:

$('#news').AdAdvance();


它使用的是dl标签当然你也可以根据自己的需要改成ul的列表标签,dt是标签,dd为图片内容。

jquery插件鼠标移上去当前列表显示图片的特效

你可能感兴趣的:(jquery列表)