jQuery 参数传递例子

演示

无标题文档

  • 网站首页
  • 网站首页
  • 网站首页
  • 网站首页
  • 网站首页
  • 网站首页
  • 网站首页

 

 

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style>
#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{}
</style>

</head>
<body>

<script type="text/javascript">
//鼠标进入时的动作效果
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");

});


</script>
<div class="aaa">
    <ul>
        <li id="x1">网站首页</li>
        <li id="x2">网站首页</li>
        <li id="x3">网站首页</li>
        <li id="x4">网站首页</li>
        <li id="x5">网站首页</li>
        <li id="x6">网站首页</li>
        <li id="x7">网站首页</li>
    </ul>
    <h1></h1>
    <h2></h2>
</div>

</body>
</html>
posted @ 2012-08-28 15:19  banbu  阅读(312)  评论(0)  编辑  收藏  举报