jQuery 参数传递例子

最新推荐文章于 2022-06-06 13:09:32 发布

ala617784513

最新推荐文章于 2022-06-06 13:09:32 发布

阅读量100

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/banbu/archive/2012/08/28/2660280.html

版权

演示

无标题文档

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

代码

<!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>

转载于:https://www.cnblogs.com/banbu/archive/2012/08/28/2660280.html

ala617784513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 参数传递例子

演示无标题文档网站首页网站首页网站首页网站首页网站首页网站首页网站首页代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
复制链接

扫一扫