本文共 1302 字，大约阅读时间需要 4 分钟。
购物网站的标签切换效果
demo主要效果由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;
}
论坛等网站的点击后回到顶部功能(页面滑动到一半时显示按键，回到顶端时速度变慢)
topwindow.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);
}
};
转载地址：https://blog.csdn.net/weixin_30942339/article/details/117841145 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
