[封装插件]Jquery中的CSS处理一览以及回到顶部按钮和鼠标悬停获取坐标的案例

于 2018-02-20 18:47:18 发布
阅读量258 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Byte_Dance/article/details/79340524
版权
8:CSS处理
CSS样式
        css(name)                 访问第一个匹配元素的样式属性。$("p").css("color");
        css(properties)          把一个“名/值对”对象设置为所有匹配元素的样式属性。
                                                                    $("p").css({ color: "#ff0011"});
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
        css(name, value | fn)  在所有匹配的元素中，设置一个样式属性的值。(右边可以是样式名 ,

                                                            值 或者 函数return的值)数字将自动转化为像素值$("p").css("color","red");

      元素位置

            offset()               获取匹配元素在当前视口的相对偏移。(元素相对于body页面,
                                                             left值为横坐标 , top值为纵坐标)
            offset([coordinates])  设置匹配元素相对于document对象的坐标。
            position()             获取匹配元素相对父元素的偏移。
            scrollTop()            获取匹配元素相对滚动条顶部的偏移。(元素滚动条离顶部的距离)
            scrollTop( [val] )  传递参数值时，设置垂直滚动条顶部偏移为该值。
            scrollLeft()            获取匹配元素相对滚动条左侧的偏移。
            scrollLeft( [val] )    传递参数值时，设置水平滚动条左侧偏移为该值。
元素尺寸
        height()               取得第一个匹配元素当前计算的高度值（px）。
        height( [val] )        为每个匹配的元素设置CSS高度(hidth)属性的值。
                                                                如果没有明确指定单位（如：em或%），使用px。
        width()                 取得第一个匹配元素当前计算的宽度值（px）。
        width( [val] )         为每个匹配的元素设置CSS宽度(width)属性的值。
        innerHeight()          获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
        innerWidth()           获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
        outerHeight(options)   获取第一个匹配元素外部高度（默认包括补白和边框）。

        outerWidth(options)    获取第一个匹配元素外部宽度（默认包括补白和边框）。

案例1:  offset() 获取元素相对于整个页面的坐标

案例2:  position() 获取元素相对于父元素的坐标

案例3:  今日头条回到顶部按钮实例

案例一: offset() 获取元素相对于整个页面的坐标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素坐标</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #divid1{
            width:500px;
            height:500px;
            background:red;
            margin: 10px;
        }
        #divid2{
            width: 250px;
            height: 250px;
            border: 5px solid blue;
            box-sizing:border-box;
            display: none;
        }
    </style>
</head>
<body>
<div id="divid1"></div>
<div id="divid2"></div>

<script>
        $("#divid1")[0].onclick = function(event) {
            //获取点击在页面中的坐标,忽略滚动条
            var x = event.pageX;
            var y = event.pageY;
            alert(x+" "+y);
    };
</script>
</body>
</html>
 

案例2:  position() 获取元素相对于父元素的坐标

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position获取元素相对于父级元素的坐标</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #warp{
            width: 1200px;
            height: 600px;
            border:3px solid red;
            box-shadow: 10px 10px 30px  black;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-600px;
            margin-top: -300px;
        }
        img{
            width: 250px;
            margin-left:35px;
            margin-top: 20px;
        }

        .divcls{
            width: 250px;
            height: 250px;
            background:red;
            display: none;
            position: absolute;

        }
    </style>
</head>
<body>
    <div id="warp">
        <img src="bd1.jpg" alt="">
        <img src="bd1.jpg" alt="">
        <img src="bd1.jpg" alt="">
        <img src="bd1.jpg" alt="">
        <div class="divcls" id="divid"></div>
    </div>

    <script>
        $("img").hover(
          function(){
            var x =$(this).position().left+35;
            var y =$(this).position().top+200;
            $("#divid").show().css({"top":y+"px","left":x+"px"});

          },
          function(){
            $("#divid").hide();
          }
        );
    </script>

</body>
</html>
 

 

 

案例3:  今日头条回到顶部按钮实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>

        *{
            margin:0;
            padding:0;
        }
        /*今日头条的右侧按钮设计思路:先给按钮设计一个固定定位,离顶部距离固定,
离左边位置为50% 加上一定的margin值*/
        #but{
            width: 200px;
            /*background: yellow;*/
            padding-left:130px;
            box-sizing: border-box;
            position:fixed;
            left: 50%;
            top: 600px;
            margin-left: 470px;
        }
        #but a{
            width: 70px;
            display: none;
        }
        .content{
            width: 1200px;
            background: skyblue;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="content">
    <h1>00000001</h1>
    <h1>00000002</h1>
    <h1>00000003</h1>
    <h1>00000004</h1>
    <h1>00000005</h1>
    <h1>00000006</h1>
    <h1>00000007</h1>
    <h1>00000008</h1>
    <h1>00000009</h1>
    <h1>00000010</h1>
    <h1>00000011</h1>
    <h1>00000012</h1>
    <h1>00000013</h1>
    <h1>00000014</h1>
    <h1>00000015</h1>
    <h1>00000016</h1>
    <h1>00000017</h1>
    <h1>00000018</h1>
    <h1>00000019</h1>
    <h1>00000020</h1>
    <h1>00000021</h1>
    <h1>00000022</h1>
    <h1>00000023</h1>
    <h1>00000024</h1>
    <h1>00000025</h1>
    <h1>00000026</h1>
    <h1>00000027</h1>
    <h1>00000028</h1>
    <h1>00000029</h1>
    <h1>00000030</h1>
    <h1>00000031</h1>
    <h1>00000032</h1>
    <h1>00000033</h1>
    <h1>00000034</h1>
    <h1>00000035</h1>
    <h1>00000036</h1>
    <h1>00000037</h1>
    <h1>00000038</h1>
    <h1>00000039</h1>
    <h1>00000040</h1>
    <h1>00000041</h1>
    <h1>00000042</h1>
    <h1>00000043</h1>
    <h1>00000044</h1>
    <h1>00000045</h1>
    <h1>00000046</h1>
    <h1>00000047</h1>
    <h1>00000048</h1>
    <h1>00000049</h1>
    <h1>00000050</h1>
    <h1>00000051</h1>
    <h1>00000052</h1>
    <h1>00000053</h1>
    <h1>00000054</h1>
    <h1>00000055</h1>
    <h1>00000056</h1>
    <h1>00000057</h1>
    <h1>00000058</h1>
    <h1>00000059</h1>
    <h1>00000060</h1>
</div>
<div id="but">
    <a href="">
        <button>回到顶部</button>
    </a>
</div>

<script>
    //默认的回到顶部按钮是隐藏的,我们要先获取滚动条离顶部的高度,超过100px就设置为显示
    //当页面滚动条发生滚动的时候,window 或者document 都可以
    $(document).scroll(
            function(){
                //判断,滚动条的高度
                if($(document).scrollTop() > 100){
                    $("#but a").show();
                }else{
                    $("#but a").hide();
                }
            }
    );
</script>
</body>
</html>
 


                

        

        

    

  


    

      

        

            

              
                
                  Byte_Dance
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值