手写滑动菜单

最新推荐文章于 2023-04-04 14:51:00 发布

——jinqiang12345

最新推荐文章于 2023-04-04 14:51:00 发布

阅读量263

点赞数

分类专栏： html 文章标签：滑块

本文链接：https://blog.csdn.net/weixin_39927443/article/details/85337050

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

代码比较简单，不再做过多介绍了

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>手写滑动菜单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
    .body {
        background: #607d8b!important;
    }
    .mindiv {
        width: 600px;
        height: 400px;
        margin: 100px auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }
    .slidebox {
        position: relative;
        overflow: hidden;
        height: 45px;
    }
    .slideboxitem {
        padding: 6px 15px;
        height: 36px;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        font-weight: 600;
        color: #607d8b;
        cursor: pointer;
        float: left;
    }
    .slidebottom {
        height: 3px;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        background: #607d8b;
    }
</style>
<body>
<div class="mindiv">
    <div class="slidebox">
        <div class="slideboxitem">一</div>
        <div class="slideboxitem">选项二</div>
        <div class="slideboxitem">选项三选项三</div>
        <div class="slideboxitem">选项四</div>
        <div class="slidebottom"></div>
    </div>
</div>
</body>
<script>
	//初始位置
    var bottomobject = {
        left: '15px',
        width: $(".slideboxitem").eq(0).width()
    }
    $(".slidebottom").css({"width": bottomobject.width,"left": bottomobject.left});
    //设置显示位置
    $(".slideboxitem").on("click", function() {
        var width = $(this).width();
        var left = $(this).offset().left - $(".mindiv").offset().left + 15;
        $(".slidebottom").css({"width": width,"left": left});
    })
</script>
</html>

实现效果

——jinqiang12345

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手写滑动菜单

代码比较简单，不再做过多介绍了&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;手写滑块&amp;lt;/title&amp;gt; &amp;lt;l
复制链接

扫一扫