position记录元素原始位置

css样式:

li {
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
background-color: #ccc;
float: left;
}

标签样式:

    <ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

js代码如下:

    let btn = document.getElementsByTagName('li');
let arr = [];//新建一个空数组记录元素的原始位置
let zIndex = 1; for (let a = 0; a < btn.length; a++) {
arr.push({
left: btn[a].offsetLeft,
top: btn[a].offsetTop
}) //记录未定位的初始位置,储存到数组
}
console.log(arr); for (let a = 0; a < btn.length; a++) {
//绝对定位后图片本身是重叠在一起
btn[a].style.position = 'absolute';
//定位后再次赋值
btn[a].style.left = arr[a].left + 'px';
btn[a].style.top = arr[a].top + 'px'; btn[a].onmouseover = function() {
btn[a].style.zIndex = zIndex++;
animate1(this, {
width: 200,
height: 200,
left: arr[a].left - 50,
top: arr[a].top - 50
}, );
}

position记录元素原始位置的更多相关文章

  1. jQuery 获取元素当前位置offset()与position()

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  2. getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...

  3. C#获取网页中某个元素的位置,并模拟点击

    我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来. ...

  4. getBoundingClientRect()来获取页面元素的位置”

    getBoundingClientRect()来获取页面元素的位置” 获取的是一个对象; 延伸阅读; https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA== ...

  5. 【CSS】定义元素的位置

    CSS定义元素的位置html元素的position属性,有4个属性值,分别是static.relative.fixed.absolute static: 1.默认值,一般不显式设置为static 2. ...

  6. Jquery获取元素的位置

    $(".curr_play").position().left //元素距离父级元素左侧位置 $(".curr_play").offset().left //元 ...

  7. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  8. jquery操作元素的位置

    .offset() 在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档. .offset() 这个不接受任何参数. var offset = p.offset(); // ...

  9. position记录

    1.  relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级.均是以父级的左上角 ...

随机推荐

  1. C#面对“重载”的Win 32 函数

    在Win32 Api中有很多添加/设置函数在参数上支持多种不同类型的结构体.这些参数定义为LPVOID* 或者LPBYTE,LPVOID*一般由Win32 分配内存空间,在C#从通过System.In ...

  2. C#判断文件是否存在 //创建txt文件

    if(System.IO.File.Exists(@"")) { } if (System.IO.File.Exists(HttpRuntime.AppDomainAppPath ...

  3. 明明引用了jquery,js还是报错

    先引jquery,不然加载上一个js的时候jquery还没有加载 <script src="js/jquery-1.9.1.js" type="text/javas ...

  4. PAT_A1147#Heaps

    Source: PAT A1147 Heaps (30 分) Description: In computer science, a heap is a specialized tree-based ...

  5. eas之kdtable格式化

    设置表.列.行或单元的格式化字符串 // 设置表table.getStyleAttributes().setNumberFormat(formatString); // 设置列column.getSt ...

  6. CSS设置input默认样式

    HTML <ul class="box"> <li> <input type="checkbox" name="vehi ...

  7. Git 基础教程 之 从远程库克隆

    ③  克隆一个本地仓库 a, 在合适的地方,在Git Bash下执行命令:         git clone git@github.com:hardy9sap/gittutorial.git

  8. fastadmin 接口(上传)

    /** * 添加注释指南 * */ public function store(Request $request) { dump($request);exit; $name = $request-&g ...

  9. opencv学习HighGUI图形用户界面初步【1】

    HighGUI是图形用户界面模块.包括:1.输入与输出:2.视频捕捉:3.图形和视频的解码编码:4.图形交界面与接口. 由于opencv.hpp包含了core.objdetect.ingproc.ph ...

  10. APIO 2017 游记

    //第一次写游记,只是流水账...结果好像确实只去游了…… day-11 省选挂了,即将退役……(然而apio之后得知并没有退役,感谢放我一条活路)(吐槽出题人考完才造数据,题目没有子任务之类的玩意, ...