<!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>
演示效果:
(这个在移动太快时最后一张有时会闪屏,暂时还不太清楚原因,有大佬知道的话麻烦讲下..)