代码如下(需要引入外部Jquery文件)：

Jquery鼠标进入与离开效果_www.


#x1,#x2,#x3,#x4,#x5,#x6,#x7{float:left;display:block;background:#000;color:#FFF;padding:5px 10px 5px 10px;
text-align:center;font-size:12px}
.aaa{}




//鼠标进入时的动作效果
function con(baba)
{
    $(baba).stop();
    $(baba).animate({paddingLeft:30,paddingRight:30,paddingTop:20,paddingBottom:20,fontSize:"40px",},200);
    $(baba).css("color","#FF0");
};

//鼠标离开时的动作效果
function coff(baba)
{
    $(baba).stop();
    $(baba).animate({paddingLeft:10,paddingRight:10,paddingTop:5,paddingBottom:5,fontSize:"12px"},200);
    $(baba).css("color","#FFF");
};

//鼠标进入时的传递配置子程序
function banenter(baba)
{
    $(baba).mouseenter(
    function()
    {
        con(baba);//匹配效果
    }
    );    
};

//鼠标离开时的传递配置子程序
function banleave(baba)
{
    $(baba).mouseleave(
    function()
    {
        coff(baba);//匹配效果
    }
    );    
};

$(document).ready(function(){
    banenter("ul li#x1");
    banenter("ul li#x2");
    banenter("ul li#x3");
    banenter("ul li#x4");
    banenter("ul li#x5");
    banenter("ul li#x6");
    banenter("ul li#x7");

    banleave("ul li#x1");
    banleave("ul li#x2");
    banleave("ul li#x3");
    banleave("ul li#x4");
    banleave("ul li#x5");
    banleave("ul li#x6");
    banleave("ul li#x7");

});


    

        
首页_脚本学堂
        
首页_
        
首页_
        
首页_脚本学堂
        
首页_
        
首页_
        
首页_
    
    
    

您可能感兴趣的文章: