<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="loucen.css" /> <script src="jquery-2.1.0.js"></script> <script src="loucen.js"></script> </head> <body> <div class="header">header</div> <div class="main"> <div class="mainbox" style="background:palegoldenrod">1</div> <div class="mainbox" style="background:palegreen">2</div> <div class="mainbox" style="background:paleturquoise">3</div> <div class="mainbox" style="background:palevioletred">4</div> <div class="mainbox" style="background:papayawhip">5</div> <div class="mainbox" style="background:peru">6</div> <div class="mainbox" style="background:plum">7</div> </div> <div class="footer">footer</div> <ul> <li class="btn"> <span class="first">1F</span> <span class="second">美妆</span> </li> <li class="btn"> <span class="first">2F</span> <span class="second">家电</span> </li> <li class="btn"> <span class="first">3F</span> <span class="second">女装</span> </li> <li class="btn"> <span class="first">4F</span> <span class="second">美食</span> </li> <li class="btn"> <span class="first">5F</span> <span class="second">汽车</span> </li> <li class="btn"> <span class="first">6F</span> <span class="second">家具</span> </li> <li class="btn"> <span class="first">7F</span> <span class="second">生活</span> </li> <li class="last">Top</li> </ul> </body> </html>
css样式表
*{margin:0;padding: 0;} ul li{ list-style:none; } .header,.footer{ width: 100%; height: 400px; background: #ccc; text-align: center; color: #000; line-height: 400px; font-size: 70px; } .mainbox{ width: 100%; height: 600px; text-align: center; color: #a55; line-height: 600px; font-size: 70px; font-weight: bold; margin: 0 auto; } ul{ position: fixed; width: 30px; border: 1px solid purple; right: 8%; top: 200px; } ul{ display: none; } ul li{ width: 30px; height: 30px; text-align: center; line-height:30px; overflow: hidden; background: #fff; } li.btn{ border-bottom:1px solid purple; font-size: 12px; } .last{ font-size: 16px; font-weight: bold; } span{ display: block; width: 30px; height: 30px; } .second{ background:purple; color:#fff; } .focus{ display: none; } .active{ display: none; }
jQuery特效js
$(function(){ $(".btn").hover(function(){ $(this).find(".first").addClass("focus") },function(){ $(this).find(".first").removeClass("focus") }) $(document).scroll(function(){ var tops=$(this).scrollTop(); if(tops>=200){ $("ul").show(700) }else{ $("ul").hide(700) } $(".mainbox").each(function(i,o){ var bTop=$(o).offset().top; if(tops>=bTop){ $(".first").removeClass("active").eq(i).addClass("active") } }) }) $(".btn").click(function(){ var index=$(this).index(); var topss=$(".mainbox").eq(index).offset().top; $("html,body").stop().animate({scrollTop:topss},800) }) $(".last").click(function(){ $("html,body").stop().animate({scrollTop:0},800) }) })
最后在引入本地jQuery文件或者外部引用