第50天：scrollTo小火箭返回顶部
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>
