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

最新推荐文章于 2020-11-16 21:21:48 发布

BunnyMelody

最新推荐文章于 2020-11-16 21:21:48 发布

阅读量1.6k

点赞数

分类专栏：【初级】前端文章标签： jquery实现 javascript

本文链接：https://blog.csdn.net/viciousdear/article/details/45063825

版权

【初级】前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

【滚动.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();
        }
    );

});