实现一个菜单的简单的动画效果

来源：互联网发布：ukcn中介怎么样知乎编辑：程序博客网时间：2024/05/21 05:09

本实例是模拟一个菜单的简单动画效果，通过监听鼠标的移入，移出事件，对菜单实现一个动画的效果。

<head>    <meta charset="UTF-8">    <style type="text/css">        li {            list-style: none;            font-size: 14px;            color: black;            padding-left: 20;        }    </style>    <script src="js/jquery-1.8.3.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $("li").mouseover(function() {                $(this).css({"font-size":"24px","color":"green","padding-left":"100"});            });            $("li").mouseout(function(){                $(this).css({"font-size":"14px","color":"black"});            });        });    </script>    <title></title></head><body>    <ul id="list">        <li>新建...</li>        <li>打开...</li>        <li>另存为...</li>        <li>打印...</li>        <li>关闭</li>    </ul></body>

最后是效果图：
这里写图片描述

阅读全文

0 0