jQuery+CSS达成的菜单效果

发布时间：2021-11-24 15:46:51 所属栏目：PHP教程来源：互联网

导读：Jquery是继prototype之后又一个优秀的Javascrīpt框架，至今已吸引了来自世界各地的众多javascript高手加入其team。在页面当中凡是涉及到前端事件和动画效果的大多数都和Jquery有关。本篇博客做一个Jquery+CSS的小DEMO，来实现菜单的动画效果。希望大家有所收

Jquery是继prototype之后又一个优秀的Javascrīpt框架，至今已吸引了来自世界各地的众多javascript高手加入其team。在页面当中凡是涉及到前端事件和动画效果的大多数都和Jquery有关。本篇博客做一个Jquery+CSS的小DEMO，来实现菜单的动画效果。希望大家有所收获。

这个DEMO需要准备的东西有5张图片，和Jquery动画效果扩展插件jquery.easing.js1.3



下面写这个例子的制作步骤：

1.     写前端HTML代码：

[html]
<ul>
            <li class="green">
                  <p><a href="#">主页</a></p>
                  <p class="subtext">首页</p>
            </li>
            <li class="yellow">
                  <p><a href="#">提高班</a></p>
                  <p class="subtext">八期</p>
            <p class="subtext">七期</p>
            <p class="subtext">六期</p>
            </li>
            <li class="red">
                  <p><a href="#">中国</a></p>
                  <p class="subtext">北京</p>
            </li>
            <li class="blue">
                  <p><a href="#">美国</a></p>
                  <p class="subtext">纽约</p>
            </li>
            <li class="purple">
                  <p><a href="#">澳大利亚</a></p>
                  <p class="subtext">堪培拉</p>
            </li>
      </ul>
2.     设置菜单的CSS样式

[css]
body
{
    font-family:@微软雅黑;
    background:#f3f3f3;
    }
ul
{
    margin:0;
    padding:0;
    }
li
{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
    }
a
{
    color:#fff;
    text-decoration:none;
    }
p
{
    padding:0px 5px;
    }
.subtext
{
    padding-top:15px;
    }

.green{background:#6aa63b url('images/green-item-bg.jpg')top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg')top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg')top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg')top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg')top left no-repeat;}
3.   导入jquery-1.4.1.js和jquery动画效果扩展插件jquery.easing.js 1.3，并编写Jquery代码

[javascript]
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <%--导入jquery动画效果扩展插件jquery.easing.js 1.3--%>
    <script src="jquery.easing.1.3.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(document).ready(function(){

            //注册超链接的单击事件
            $("a").click(function(){
                $(this).blur();      //失去焦点触发的事件
            });

            //鼠标移到li上边的事件
            $("li").mouseover(function(){
                //停在指定的元素上(stop)自定义动画(animate)
                $(this).stop().animate({height: '200px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })
            });

            //鼠标移出li的事件
            $("li").mouseout(function(){
                $(this).stop().animate({height:'50px'},{queue:false,duration:600,easing:'easeOutBounce'});
            });

        });

    </script>

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

php读取大文件最好的实	php无限遍历文件夹示例
php中实现过滤UBB代码	Laravel模板引擎Blade