用jQuery写出类似与淘宝右边导航栏的效果
1.具体要求
要求1：当鼠标悬浮在对应的块上时，需要改变样式；鼠标离开时，恢复原来的样式
要求2：当点击时，页面“滚动”到对应的位置，且同时改变对应点击块的样式
要求3：颜色样式尽量比配，反馈和举报不需要做点击处理
要求4：页面的内容为贴图，图片会打包提供
图片获取地址https://pan.baidu.com/s/1BSofwC7bHbN-zZ2RGxv4pg
提取码：z6vr
2.代码以及分析#
2.1核心函数以及思想：
scrollTop():获取当前滚轮对于也i按顶部的距离，可以
.animat()该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果
返回顶部的显示与否通过scrollTop():进行判断在加上show()和hide()进行显示和隐藏
2.2代码
代码只是完成了效果但是也并不是最佳的解决办法，欢迎大佬评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1191px;
margin: 0 auto;
}
#cl{
position: fixed;
left: 93%;
top: 75px;
display: block;
transition: none 0s ease 0s;
}
ul{
width: 70px;
list-style: none;
background-color: antiquewhite;
/*border-radius: 10%;*/
border-radius: 10%;
}
li{
width: 40px;
height: 40px;
padding: 15px 15px;
border-bottom: 1px solid #D6DFEA;
}
span{
font-size:20px ;
display: block;
width: 40px;
}
.active{
background-color: #FF6600;
color: white;
}
li:active,li:hover{
background-color: #FF6600;
color: white;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
$(function(){
$(document).scroll(function(){
var res=$('html,body').scrollTop();//813为返回顶部出现的位置
if(res>=813){
$("#re").show();
}else{
$("#re").hide();
}
//对应的是各个部分的位置
if(res<1473){
$("li").eq(0).addClass("active");
$("li").eq(0).siblings().removeClass("active");
}else if(res<2308){
$("li").eq(1).addClass("active");
$("li").eq(1).siblings().removeClass("active");
}else if(res<3880){
$("li").eq(2).addClass("active");
$("li").eq(2).siblings().removeClass("active");
}else if(res<4138){
$("li").eq(3).addClass("active");
$("li").eq(3).siblings().removeClass("active");
}else if(res>=4138){
$("li").eq(4).addClass("active");
$("li").eq(4).siblings().removeClass("active");
}
})
//点击实施跳转到对应的位置，动画效果的精髓在于animate()函数，siblings()可以实现同级的其它元素的统一操作
$("li").click(function(){
console.log(111);
var top=0;
if($(this).index()==0){
top=816;
}else if($(this).index()==1){
top=1473;
}else if($(this).index()==2){
top=2308;
}else if($(this).index()==3){
top=3880;
}else if($(this).index()==4){
top=4138;
}else
top=0;
$('html,body').animate({scrollTop:top},500);
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
})
</script>
</head>
<body>
<div id="content">
<img src="image/t0.jpg" />
<img src="image/t1.jpg" />
<img src="image/t2.jpg" />
<img src="image/t3.jpg" />
<img src="image/t4.jpg" />
<img src="image/t5.jpg" />
<img src="image/t6.jpg" />
<img src="image/t7.jpg" />
<img src="image/t8.jpg" />
</div>
<div id="cl">
<ul>
<li class="active" style="border-top-right-radius: 15%;border-top-left-radius: 15%;"><span >爱逛<br />好货</span></li>
<li><span >好店<br />直播</span></li>
<li><span >品质<br />特色</span></li>
<li><span >实惠<br />特卖</span></li>
<li><span >猜你<br />喜欢</span></li>
<li id="re" hidden=""><span ><span >  ∧<br />顶部</span></span></li>
</ul>
</div>
</body>
</html>
如果大家有好的修改意见，欢迎大家留言
原创文章 73
获赞 64
访问量 2735