jQuery实现小功能之鼠标悬浮时上下翻滚文字

来源：互联网发布：mac 看不到文件夹编辑：程序博客网时间：2024/05/16 04:57

【滚动.html】

<!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>滚动</title>        <link rel="stylesheet" href="滚动.css" type="text/css">        <script type="text/javascript" src="jquery-2.1.3.js"></script>        <script type="text/javascript" src="滚动.js"></script>    </head>    <body>        <div class="secondNavContent">            <ul id="feature">                <li><a href="#" ><span>产品</span><span>产品</span></a></li>                <li><a href="#" ><span>方案</span><span>方案</span></a></li>                <li><a href="#" ><span>案例</span><span>案例</span></a></li>                <li><a href="#" ><span>关于我们</span><span>关于我们</span></a></li>                <li><a href="#" ><span>支持&下载</span><span>支持&下载</span></a></li>                <li><a href="#" ><span>新闻中心</span><span>新闻中心</span></a></li>            </ul><!--feature end-->                     </div>    </body></html>

【滚动.css】

.secondNavContent{    position:absolute;    left:480px;    top:15px;    /*background-color:silver;*/    height:75px;    width:750px;}#feature li,#feature li a,#feature li a span,#feature li a p{    display:block;    height:55px;    overflow:hidden;    position:relative;    cursor:pointer;}#feature{    width:750px;    height:75px;    overflow:hidden;    margin:20px auto;    margin:0;padding:0;list-style-type:none;margin:0;padding:0;}#feature li{    float:left;    width:120px;}#feature li a{text-decoration:none;}#feature li a span{    font-size:14px;    font-weight:bold;    padding-left:     20px;color:#666;    line-height:55px;}

【滚动.js】

$(document).ready(function(){    function itemShow(){            $("#feature li.current a span").stop();            $("#feature li.current a span").animate({top: "-55px" }, "fast");    }    function itemHide(){        $("#feature li.current a span").stop();        $("#feature li.current a span").animate({top: "0px" }, "fast");        $("#feature li.current").removeClass("current");    }    $("#feature li").hover(        function(){            $(this).addClass("current");            itemShow();        }        ,        function(){            itemHide();        }    );});

0 0