scrollTo(x,y)//可把内容滚动到指定的坐标 scrollTo(xpos,ypos)//x,y值必需
1、固定导航栏
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>固定导航栏</title>
6 <script src="my.js" type="text/javascript"></script>
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 img{
13 vertical-align: top;
14 }
15 .main{
16 margin: 0 auto;
17 width: 1000px;
18 margin-top: 10px;
19 }
20 .fixed{
21 position: fixed;
22 top:0;
23 left:0;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="top" id="Q-top">
29 <img src="images/top.png" alt="">
30 </div>
31 <div class="nav" id="Q-nav">
32 <img src="images/nav.png" alt="">
33 </div>
34 <div class="main">
35 <img src="images/main.png" alt="">
36 </div>
37
38 </body>
39 </html>
40 <script>
41 var nav=$("Q-nav");
42 var navTop=nav.offsetTop;//导航栏距离顶部的距离
43 //alert(navTop);
44 window.onscroll=function(){
45 //console.log(scroll().top);
46 if(scroll().top>=navTop){
47 nav.className="nav fixed";
48 }else{
49 nav.className="nav";
50 }
51 }
52 </script>
2、鼠标移动跟随的广告
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>跟随的广告</title>
6 <style>
7 img{
8 position: absolute;
9 top:50px;
10 left:0;
11
12 }
13 .txt{
14 width: 200px;
15 margin: 0 auto;
16 }
17 </style>
18 </head>
19 <body>
20 <img src="images/aside.jpg" alt="" id="ad">
21 <div class="txt" id="txt">
22 <p>好好学习,天天向上</p>
23 <p>天天奋斗,天天快乐</p>
24 <p>好好学习,天天向上</p>
25 <p>天天奋斗,天天快乐</p>
26 <p>好好学习,天天向上</p>
27 <p>天天奋斗,天天快乐</p>
28 <p>好好学习,天天向上</p>
29 <p>天天奋斗,天天快乐</p>
30 <p>好好学习,天天向上</p>
31 <p>天天奋斗,天天快乐</p>
32 <p>好好学习,天天向上</p>
33 <p>天天奋斗,天天快乐</p>
34 <p>好好学习,天天向上</p>
35 <p>天天奋斗,天天快乐</p>
36 <p>好好学习,天天向上</p>
37 <p>天天奋斗,天天快乐</p>
38 <p>好好学习,天天向上</p>
39 <p>天天奋斗,天天快乐</p>
40 <p>好好学习,天天向上</p>
41 <p>天天奋斗,天天快乐</p>
42 <p>好好学习,天天向上</p>
43 <p>天天奋斗,天天快乐</p>
44 <p>好好学习,天天向上</p>
45 <p>天天奋斗,天天快乐</p>
46 </div>
47 </body>
48 </html>
49 <script src="my.js" type="text/javascript"></script>
50 <script>
51 window.onload=function(){
52 var ad=$("ad");
53 var leader=0;
54 var target=0;
55 var timer=null;//定时器
56 var top=ad.offsetTop;
57 window.onscroll=function(){
58 target=scroll().top+top;//把最新的scrollTop给target
59 timer=setInterval(function(){
60 leader=leader+(target-leader)/10;
61 ad.style.top=leader+'px';
62 },30)
63 }
64
65 }
66 </script>
3、小火箭返回顶部
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 width: 2000px;
9 }
10 .top{
11 position: fixed;
12 right: 50px;
13 bottom: 100px;
14 display: none;
15 }
16 </style>
17 </head>
18 <body>
19 <div class="top" id="gotop">
20 <img src="images/Top.jpg" alt="">
21 </div>
22 <div>
23 <p>我是内容部分,有很多很多</p>
24 <p>我是内容部分,有很多很多</p>
25 <p>我是内容部分,有很多很多</p>
26 <p>我是内容部分,有很多很多</p>
27 <p>我是内容部分,有很多很多</p>
28 <p>我是内容部分,有很多很多</p>
29 <p>我是内容部分,有很多很多</p>
30 <p>我是内容部分,有很多很多</p>
31 <p>我是内容部分,有很多很多</p>
32 <p>我是内容部分,有很多很多</p>
33 <p>我是内容部分,有很多很多</p>
34 <p>我是内容部分,有很多很多</p>
35 <p>我是内容部分,有很多很多</p>
36 <p>我是内容部分,有很多很多</p>
37 <p>我是内容部分,有很多很多</p>
38 <p>我是内容部分,有很多很多</p>
39 <p>我是内容部分,有很多很多</p>
40 <p>我是内容部分,有很多很多</p>
41 <p>我是内容部分,有很多很多</p>
42 <p>我是内容部分,有很多很多</p>
43 <p>我是内容部分,有很多很多</p>
44 <p>我是内容部分,有很多很多</p>
45 <p>我是内容部分,有很多很多</p>
46 <p>我是内容部分,有很多很多</p>
47 <p>我是内容部分,有很多很多</p>
48 </div><!--内容部分-->
49 </body>
50 </html>
51 <script src="my.js" type="text/javascript"></script>
52 <script>
53 var goTop=$("gotop");
54 window.onscroll=function(){
55 scroll().top>0?show(goTop):hide(goTop);
56 leader=scroll().top;
57 }
58 var leader=0;
59 var target=0;
60 var timer=null;
61 goTop.onclick=function(){
62 target=0;//点击后 等于0
63 timer=setInterval(function(){
64 leader=leader+(target-leader)/10;
65 window.scrollTo(0,leader);
66 if(leader==target){
67 clearInterval(timer);
68 }
69 },20)
70 }
71 </script>
4、屏幕滑动效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>屏幕滑动效果</title>
6 <style>
7 ul,ol{
8 list-style: none;
9 }
10 *{
11 margin: 0;
12 padding: 0;
13 }
14 html,body{
15 width: 100%;
16 height: 100%;
17 }
18 #ul{
19 width: 100%;
20 height: 100%;
21 }
22 ul li{
23 width: 100%;
24 height: 100%;
25 background-color: peachpuff;
26
27 }
28 #ol{
29 position: fixed;
30 top:0;
31 left:50px;
32 }
33 #ol li{
34 width: 50px;
35 height: 50px;
36 border:1px solid #000;
37 }
38 </style>
39 </head>
40 <body>
41 <ul id="ul">
42 <li>首页</li>
43 <li>关注</li>
44 <li>动态</li>
45 <li>风格</li>
46 <li>作品</li>
47 </ul>
48 <ol id="ol">
49 <li>首页</li>
50 <li>关注</li>
51 <li>动态</li>
52 <li>风格</li>
53 <li>作品</li>
54 </ol>
55 </body>
56 </html>
57 <script src="my.js"></script>
58 <script>
59 var ulBox=$("ul");
60 var ulBoxli=ulBox.children;
61 var olBox=$("ol");
62 var olBoxli=olBox.children;
63 var bgColor=["pink","blue","yellow","green","orange"];
64 var leader=0;
65 var target=0;
66 var timer=null;
67 for(var i=0;i<ulBoxli.length;i++){
68 ulBoxli[i].style.backgroundColor=bgColor[i];
69 olBoxli[i].style.backgroundColor=bgColor[i];
70 olBoxli[i].index=i;//记录当前的索引号
71 olBoxli[i].onclick=function(){
72 clearInterval(timer);
73 target=ulBoxli[this.index].offsetTop;//重点
74 timer=setInterval(function(){
75 leader=leader+(target-leader)/10;
76 window.scrollTo(0,leader);//屏幕滑动
77 },20)
78 }
79 }
80 </script>