<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
#container ul li{
width: 100%;
height: 600px;
text-align: center;
border-top: 3px solid blue;
font-size: 25px;
}
.float{
list-style: none;
width: 80px;
height: 300px;
position: fixed;
right: 1%;
top: 50%;
}
a{
text-decoration: none;
color: black;
}
.float li{
width: 100%;
height: 10%;
background-color: orange;
text-align: center;
cursor: pointer;
}
</style>
<body>
<div id="container">
<ul>
<li><a name="one"></a>服装</li>
<li><a name="two"></a>饮食</li>
<li><a name="three"></a>生活</li>
<li><a name="four"></a>日常</li>
</ul>
</div>
<ul class="float">
<li><a href="#one">服装</a></li>
<li><a href="#two">饮食</a></li>
<li><a href="#three">生活</a></li>
<li><a href="#four">日常</a></li>
<li>回到顶部</li>
</ul>
<script type="text/javascript">
//点击回到顶部
$(".float>li:last").click(function(){
$("body").animate({
"scrollTop":"0"
},500)
})
</script>
</body>
</html>
演示效果：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
#box ul{
margin: 50px auto;
height: 405px;
width: 800px;
overflow: hidden;
list-style: none;
}
#box ul li{
float: left;
height: 400px;
}
.inactive{
width: 75px;
}
</style>
<body>
<div id="box">
<ul>
<li ><img src="images/1.jpg"></li>
<li class="inactive"><img src="images/2.jpg"></li>
<li class="inactive"><img src="images/3.jpg"></li>
<li class="inactive"><img src="images/4.jpg"></li>
<li class="inactive"><img src="images/5.jpg"></li>
</ul>
</div>
<script type="text/javascript">
$("#box ul li").mouseover(function(event) {
/* Act on the event */
$(this).stop(true).animate({width:500},200).siblings().stop(true).animate({width:75},200)
});
</script>
</body>
</html>
演示效果:
(这个在移动太快时最后一张有时会闪屏，暂时还不太清楚原因，有大佬知道的话麻烦讲下..）