jquery--尺寸相关（获取设置尺寸/高度，获取页面绝对位置）/滚动事件/例子-置顶菜单、无缝滚动

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置----------------重要

offset()

3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  
    ......  
})

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>获取元素绝对位置</title>
 9 
10     <style type="text/css">
11         .box{
12             width:100px;
13             height:100px;
14             margin-bottom:10px;
15             background-color:gold;
16         }
17 
18         .pos{
19             margin-left:500px;
20         }
21 
22         .pop{
23             width:100px;
24             height:100px;
25             background-color:red;
26             position:fixed;
27             left:0;
28             top:0;
29             display:none;
30         }
31     </style>
32 
33     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
34     <script type="text/javascript">
35         $(function(){
36             var $pos=$('.pos');
37             var pos=$pos.offset();    //获取元素相对页面的绝对位置
38             var w=$pos.outerWidth();  //获取包括padding和border的width和height
39             var h=$pos.outerHeight();
40 
41             //document.title=pos.left+'|'+pos.top  //508|228
42             //console.log(w,h);  //100,100
43 
44             $('.pop').css({left:pos.left+w,top:pos.top});  //重新设置pop绝对位置的left和top，不会影响整个页面的布局
45 
46             $pos.mouseover(function(){    //mouseover() 鼠标进入（进入子元素也触发）
47                 $('.pop').show()   //显示
48             })
49 
50             $pos.mouseout(function(){    //mouseout() 鼠标离开（离开子元素也触发）
51                 $('.pop').hide()  //隐藏
52             })
53         })
54     </script>
55 </head>
56 <body>
57     <div class="box"></div>
58     <div class="box"></div>
59     <div class="box pos"></div>
60     <div class="box"></div>
61 
62     <div class="pop">
63         提示信息！
64     </div>
65 </body>
66 </html>

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>置顶菜单</title>
  6 
  7     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  8     <script type="text/javascript">
  9     $(function(){
 10         $(window).scroll(function(){   //页面滚动事件
 11             var nowtop=$(document).scrollTop();  //获取页面向上滚动距离
 12             //console.log(nowtop);
 13 
 14             if(nowtop>200){
 15                 $('.menu').css({
 16                     position:'fixed',
 17                     top:0,
 18                     left:'50%',      //和下面的marginLeft结合使用，使.menu居中
 19                     marginLeft:-480,
 20                 });
 21                 $('.menu_pos').show()     //和下面的$('.menu_pos').hide()结合使用，当nowtop>200时，menu_pos和menu有重合，消除滑动滚动条时menu_pos卡顿效果（造成卡顿的原因是fix定位脱离了文档流导致）
 22                 }
 23             else{
 24                 $('.menu').css({
 25                     position:'static',   //static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
 26                     marginLeft:'auto'   //这里需要有marginLeft，为了覆盖上面的marginLeft:-480
 27                 });
 28                 $('.menu_pos').hide()
 29             }
 30 
 31 
 32             //控制图标渐入渐出
 33             if(nowtop>400){
 34                 $('.totop').fadeIn();
 35             }
 36             else{
 37                 $('.totop').fadeOut();
 38             }
 39         })
 40 
 41 
 42         //------------点击图标置顶----------
 43         $('.totop').click(function(){
 44             $('html,body').animate({'scrollTop':0})
 45         })
 46     })
 47 
 48     </script>
 49 
 50     <style type="text/css">
 51         body{margin:0px;}
 52         .logo_bar{
 53             width:960px;
 54             height:200px;
 55             background-color:#f0f0f0;
 56             margin:0 auto;
 57 
 58         }
 59         .menu,.menu_pos{
 60             width:960px;
 61             height:50px;
 62             margin:0 auto;
 63             background-color:gold;
 64             text-align:center;
 65             line-height:50px;
 66         }
 67         .menu_pos{
 68             display:none;
 69         }
 70 
 71         .down_con{
 72             width:960px;
 73             height:1800px;
 74             margin:0 auto;
 75         }
 76 
 77         .down_con p{
 78             margin-top:100px;
 79             text-align:center;
 80         }
 81 
 82         .totop{
 83             width:50px;
 84             height:50px;
 85             background:url(images/up.png) center center no-repeat #000;
 86             border-radius:50%;
 87             position:fixed;
 88             right:50px;
 89             bottom:50px;
 90             display:none;
 91         }
 92     </style>
 93 
 94 </head>
 95 <body>
 96     <div class="logo_bar">顶部logo</div>
 97     <div class="menu">置顶菜单</div>
 98     <div class="menu_pos"></div>
 99     <div class="down_con">
100         <p style="color:red">网站主内容</p>
101         <p>网站主内容</p>
102         <p>网站主内容</p>
103         <p>网站主内容</p>
104         <p>网站主内容</p>
105     </div>
106     <a href="javascript:;" class="totop"></a>
107 </body>
108 </html>

 

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>无缝滚动</title>
  6     <style type="text/css">
  7         body,ul,li{margin:0;padding:0}
  8         ul{list-style:none;}
  9         .slide{
 10             width:500px;
 11             height:100px;
 12             border:1px solid #ddd;
 13             margin:20px auto 0;
 14             position:relative;
 15             overflow:hidden;
 16         }
 17 
 18         .slide ul{
 19             position:absolute;
 20             width:1000px;
 21             height:100px;
 22             left:0;
 23             top:0;
 24         }
 25 
 26         .slide ul li{
 27             width:90px;
 28             height:90px;
 29             margin:5px;
 30             background-color:#ccc;
 31             line-height:90px;
 32             text-align: center;
 33             font-size:30px;
 34             float:left;
 35         }
 36 
 37         .btns{
 38             width:500px;
 39             height:50px;
 40             margin:10px auto 0;
 41         }
 42 
 43     </style>
 44     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 45     <script type="text/javascript">
 46         $(function(){
 47             var $ul=$('ul')
 48             var left=0;
 49             var decoration=2   //设置变量，方便点击按钮控制向左还是向右移动
 50 
 51             $ul.html($ul.html()+$ul.html())  //这里设置两个ul，为了做反复执行效果，和下面的if判断联合使用
 52 
 53             var timer=setInterval(move,30);
 54 
 55             function move(){    //setInterval反复执行
 56                 left-=decoration;
 57                 $ul.css({left:left});  //left一直在变
 58 
 59                 if(left<-500){
 60                     left=0;
 61                 }
 62                 if(left>0){
 63                     left=-500;
 64                 }
 65             }
 66 
 67             $('#btn1').click(function(){
 68                 decoration=2;  //向左移动
 69             })
 70             $('#btn2').click(function(){
 71                 decoration=-2;  //向右移动
 72             })
 73 
 74             $('#slide').mouseover(function(){     //鼠标滑动到slide时，清除定时器
 75                 clearInterval(timer);
 76             })
 77             $('#slide').mouseout(function(){      //鼠标滑出到slide时，再次设定定时器
 78                 timer=setInterval(move,30);
 79             })
 80         })
 81 
 82     </script>
 83 
 84 
 85 </head>
 86 <body>
 87     <div class="btns">
 88         <input type="button" name="" value="向左" id="btn1">
 89         <input type="button" name="" value="向右" id="btn2">
 90 
 91     </div>
 92     <div class="slide" id="slide">
 93         <ul>
 94             <li>1</li>
 95             <li>2</li>
 96             <li>3</li>
 97             <li>4</li>
 98             <li>5</li>
 99         </ul>
100     </div>
101 </body>
102 </html>

posted on 2019-12-23 21:48  cherry_ning  阅读(191)  评论(0)    收藏  举报

导航