HTML 标签切换效果/回到顶部功能

最新推荐文章于 2024-06-20 09:14:57 发布

买榴莲也用卷

最新推荐文章于 2024-06-20 09:14:57 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： html JS CSS

本文链接：https://blog.csdn.net/GG9527li/article/details/87606771

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

购物网站的标签切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab">
    <div class="tab-title">
        <ul>
            <li>
                <a href="#">公告</a>
            </li>
            <li>
                <a href="#">资讯</a>
            </li>
            <li>
                <a href="#">科技</a>
            </li>
            <li>
                <a href="#">论坛</a>
            </li>
        </ul>

    </div>

</div>
</body>
</html>

主要效果由CSS实现

*{
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    list-style: none;
}
.tab{
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}
.tab-title{
    height: 27px;
    position: relative;
    background: #f7f7f7;
}
.tab-title ul{
    position: absolute;
    width: 301px;
    left: -1px;
}
/*设置li标签的间距与宽度*/
.tab-title li{
    float: left;
    width: 58px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    padding: 0 1px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}
/*去掉下划线设置字体颜色*/
.tab-title li a:link,.tab-title li a:visited{
    text-decoration: none;
    color: #000;
}
/*//鼠标滑动变色效果*/
.tab-title li a:hover{       
    color: #f90;
    font-weight: 700;
}

论坛等网站的点击后回到顶部功能（页面滑动到一半时显示按键，回到顶端时速度变慢）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>top</title>
    <link type="text/css" rel="stylesheet" href="style2.css">
</head>
<body>
<a href="javascript:;"  style="display: none" class="btn" title="回到顶部" id="btn"></a>

</body>
</html>

window.onload = function () {
    var  topbtn = document.getElementById("btn");
    var timer = null; //设置定时器
    var  pageheight = document.documentElement.clientHeight; //获取页面高度
    window.onscroll = function(){
        var backtop = document.body.scrollTop;
        if (backtop >= pageheight){                 //根据页面高度让决定按键是否显示
            topbtn.style.display = "block";
        }else {
            topbtn.style.display = "none";
        }
    };
    topbtn.onclick = function () {
        timer = setInterval(function () {
            var backtop = document.body.scrollTop;
            var speed = backtop/5;
            document.body.scrollTop = backtop-speed;   //让到页面顶端时速度变慢
            if(backtop==0){
                clearInterval(timer);
            }
        },30);

    }
};