js相对定位

效果图:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
</style>
</head>
<body>
	<div style="width:1200px;height:120px;background:red;"  id="div1">aaaaaaaaaaaaaaaa</div>
	<div style="width:1200px;height:120px;background:green;">aaaaaaaaaaaaaaaa</div>
	<div style="width:1200;height:120px;">aaaaaaaaaaaaaaaa</div>
	<div id="weixin_img">
		<img src="weixin.jpg"  style="width:130px;">
	</div>
	<div style="width:1200px;height:1200px;background:green;">aaaaaaaaaaaaaaaa</div>
</body>
<script>

var div1=document.getElementById(‘div1‘);
/*获取元素的纵坐标*/
function getTop(e)
{
   var offset=e.offsetTop;
   if(e.offsetParent!=null){
     offset+=getTop(e.offsetParent);
   }
   return offset;
}
/*获取元素的横坐标*/
function getLeft(e)
{
   var offset=e.offsetLeft;
   if(e.offsetParent!=null){
      offset+=getLeft(e.offsetParent);
   }
   return offset;
} 

document.getElementById(‘weixin_img‘).style.position="fixed";
document.getElementById(‘weixin_img‘).style.top=getTop(div1)+"px";
document.getElementById(‘weixin_img‘).style.left=(getLeft(div1)+1200)+"px";

</script>
</html>
时间: 2024-10-29 19:05:37

js相对定位的相关文章

JS之parentNode与offsetParent

JS中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,element.parentNode,获取某一个元素的父节点,这里的父节点呢,只有一个,就是指的是最临近的直接父节点.比如我们经常会有这样的需求:一个列表,点击删除删除一列,如下: <ul id="list"> <li>我是沐晴<span>删除</spa

用js实现放大镜的效果

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

JS入门经典笔记

1,转义字符 \b 退格字符   \f 换页符   \n 换行字符  \r 回车字符  \t 制表符  \'单引号 \"双引号 \\ 反斜线 \xNN 其中NN是一个十六进制数,表示Latin-1字符集中的编号来表示一个字 2.parseInt()函数与parseFloat()函数把字符串转换为整数和浮点数   这两个函数逐字解析,如果解析到的字符不是有效数字,解析将停止,并把解析到之前的字符串转换为对应的数值.如parseInt("123abc")将返回数值123,当jav

js中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client

js和jq中常见的各种位置距离之offsetLeft和position().left的区别(四)

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置. 附上调试代码: 1 <style> 2 *{margin:0;padding:0;} 3 #parent{ position: relative; padding: 10px; marg

【06-23】js动画学习笔记01

1 <html> 2 <head> 3 <style> 4 * { 5 margin:0; 6 padding:0; 7 } 8 #div1{ 9 width:200px; 10 height:200px; 11 background:red; 12 position:relative; 13 left:-200px; 14 top:0; 15 } 16 #div1 span{ 17 width:20px; 18 height:50px; 19 background:s

电力项目七--js添加浮动框

1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:9

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

2016/12/10前端学习笔记CSS结束+JS开始。

18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理 css属性之前加上下划线是IE6的专有属性 例如:_background-color:red; 19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象.但是浮动后没有塌陷. 20