jquery简单特效一、下划线随鼠标移动而平移

最新推荐文章于 2024-04-23 15:57:32 发布

原创

最新推荐文章于 2024-04-23 15:57:32 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何使用jQuery库创建一个简单的特效，让下划线随着鼠标的移动而在页面上平滑地移动。教程需要预先引入jQuery.js文件。

需要引入jquery.js文件

<style>
.site-nav{width:1000px; margin:20px auto; border-bottom:1px solid #ddd; position:relative;}
.site-nav .container{height:32px;}
.site-nav a{display:block; width:100px; float:left; text-align:center;padding-bottom:7px; font-size:18px; color:#999;}
.site-nav a.current1,.site-nav a:hover{color:#e3000c;}
.site-nav a{}
.site-nav .nav-marker{position:absolute; width:40px; height:3px; background:red; bottom:-1px;}
</style>

<div class="site-nav">
	<div class="container clearfix">
        <a href="#">网站首页</a>
        <a href="#">关于我们</a>
        <a href="#">产品中心</a>
        <a href="#" class="current1">新闻资讯</a>
        <a href="#">联系我们</a>
    </div>
    <div class="nav-marker"></div>
</div>

<script>
//下划线随鼠标移动
$(func