zoukankan      html  css  js  c++  java
  • 布局转换:文档流->绝对定位

    布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)
    比如一个DIV中有三张图片并排,个数不确定的布局。需要鼠标移上去图片从中心放大,只使用float:left布局在放大的时候会导致旁边的元素跟着动,所以需要将float布局转换为absolute绝对定位
    1、先使用文档流布局,可以用float这些
    2、因为每个图片元素都有offsetLeft和offsetTop,通过遍历获取将offsetLeft和offsetTop赋值给自己的left和top值,最后将元素属性改为绝对定位
    for(var i=0;i<aLi.length;i++){
      aLi[i].style.left=aLi[i].offsetLeft+'px';
      aLi[i].style.top=aLi[i].offsetTop+'px';
    }
    for(var i=0;i<aLi.length;i++){
    aLi[i].style.position='absolute'; //需要将设置left、top和设置定位absolute分开写。写在一起将会导致每个元素获取的left和top值相同,因为每个元素都有左浮动,浮动后就添加absolute则后一个li的位置就会左浮动到第一个li的位置
    aLi[i].style.position='0'; //如果有margin还需去掉margin。因为在流动布局中的margin在转换为绝对定位后的left和top中已经包含其中了
    }

    小技巧:多张图片,鼠标悬停放大,会因为z-index层级相同而导致前面的图片被后面的覆盖。可以创建一个zIndex=2,每次悬停的时候赋值给悬停的图片,然后再zIndex++,这样就可以每次悬停的图片在最上层了。z-index最大值为1亿多

  • 相关阅读:
    weak_ptr解决shared_ptr环状引用所引起的内存泄漏[转]
    如何限制对象只能建立在堆上或者栈上(转载)
    为了异常安全(swap,share_ptr)——Effecive C++
    注意类型转换——Effective C++
    http协议
    【java.math.BigInteger】常用函数
    【java.math.BigInteger】【转】常见问题
    【思路,dp,BigInteger】ZOJ
    【Warshall_Floyd】
    【Dijkstra】
  • 原文地址:https://www.cnblogs.com/3body/p/5417009.html
Copyright © 2011-2022 走看看