zoukankan      html  css  js  c++  java
  • jQuery中动画常用的样式获取并改变方法-

    (1)Top 和 left 

      经常要用到jquery获取对象的位置,jquery top left,jquery css left是相对于父级元素中第一个position为relative或absolute的元素靠左边的距离,jquery top left,jquery css left等要熟练运用

      对left和top的解释:

        值为auto : 无特殊定位,根据HTML定位规则载文档流中分配;
        值为length :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效;

      ①、通过jQuery获取css的值获取字符串

    1 var left = $('#test').css('left');
    2 var top = $('#test').css('top');

        但是这一种获取方式得到的是一个字符串,不能直接获取像素值

       ②、通过 position() 方法获取像素值

    1 var left = $('#test').position().left;
    2 var top = $('#test').position().top;

      jquery获取left和top值,一般都用第二种方法,因为我们直接获取了left和top的像素值,可以直接用于计算,免去了通过函数praseInt转换的麻烦,如果要设置css的left和top属性,可以看jquery设置css

      区别  var left = $('#test').offset().left;       

      见另一随笔。

    (2)Color

    1 var color = $('#test').css("color");

      使用该方法返回的是rgb(65, 136, 251);

      用下面方法转换为“#xxxxxx”:

      

     var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.
     
     var parts = rgbString.match(/^rgb((d+),s*(d+),s*(d+))$/); // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
     
     delete (parts[0]);
    for (var i = 1; i <= 3; ++i) {   parts[i] = parseInt(parts[i]).toString(16);   if (parts[i].length == 1) parts[i] = '0' + parts[i];  } var hexString = parts.join(''); // "0070ff"

      或者下面这个funciton

    1 function rgb2hex(rgb) {
    2   rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/); 3   function hex(x) { 4     return ("0" + parseInt(x).toString(16)).slice(-2); 5   } 6     return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 7 }

      

      

  • 相关阅读:
    微软职位内部推荐-Senior Software Engineer
    微软职位内部推荐-SENIOR SOFTWARE ENGINEER
    微软职位内部推荐-SDEII
    微软职位内部推荐-SOFTWARE ENGINEER II
    微软职位内部推荐-SOFTWARE ENGINEER II
    微软职位内部推荐-Senior SDE
    微软职位内部推荐-SDEII
    elasticsearch实现按天翻滚索引
    kafka中处理超大消息的一些处理
    Kafka主要配置
  • 原文地址:https://www.cnblogs.com/lianghaijie-ctw/p/5947801.html
Copyright © 2011-2022 走看看