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 @   banbu  阅读(313)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· 【译】.NET 升级助手现在支持升级到集中式包管理
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· 并发编程 - 线程同步(二)
点击右上角即可分享
微信分享提示