前言：
在做前端的项目中，经常看到移动一个小图标上显示这个图标对应的大图的提示，之前的做法是在小图标的位置后面添加一个div，然后移动到小图标然后显示这个图标的图片！但是这个方法做的时候发现，如果提示图片很多，要控制大图片的定位样式要写好多，很费时，效率也不好！
后来想过利用在小图标的上添加一个自定义属性，js通过读取这个图标的上自定义属性自动创建一个大图的div，而且生成相应的位置！移出小图标还可以删除这个div！
1、实现方式
html结构：
<a href="javascript:;" class="tooltip zmxl" rel="http://cache.zuixiaoyao.com/act/special/yinuo/images/sub/tip1.jpg"></a>
2、js实现
计算元素的绝对位置
unction GetAbsoluteLocation(element) { if ( arguments.length != 1 || element == null ) { return null; } var offsetTop = element.offsetTop; //获取元素距离父元素顶部的高度 var offsetLeft = element.offsetLeft; //获取元素距离父元素左部的距离 var offsetWidth = element.offsetWidth; //获取元素自身的宽度 var offsetHeight = element.offsetHeight; //获取元素自身的高度 while( element = element.offsetParent ) { //如果有上级元素，继续叠加运算 offsetTop += element.offsetTop; offsetLeft += element.offsetLeft; } return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; //返回这个元素的位置对象 }
主体实现
$(‘.tooltip‘).each(function(i){ $(this).hover(function(){ var _this = $(this)[0];//当前元素的dom对象 var pos = GetAbsoluteLocation(_this);//计算位置 var div = document.createElement(‘div‘);//创建一个div var p = document.createElement(‘p‘);//创建一个p标签 p.innerHTML = ‘<img src="http://cache.zuixiaoyao.com/act/special/yinuo/images/sub/loading.gif" width="50" height="54"/>‘;//loading图片 div.appendChild(p);//添加p到div中 div.id = ‘pos_h_cread‘;//给div添加一个ID div.style.position = ‘absolute‘; div.style.zIndex = 9999999; div.style.left = pos.absoluteLeft + ‘px‘; if($(this).attr(‘pos‘) == ‘r‘){ div.style.left = pos.absoluteLeft - 60 + ‘px‘; } div.style.top = (pos.absoluteTop + pos.offsetHeight)+ ‘px‘; document.body.appendChild(div); var image = new Image();//创建一个image对象 image.onload = function(){ var _w = this.width;//获取图片的宽度 var _h = this.height;//获取图片的高度 div.innerHTML = ‘<img src=‘+ sr_img +‘ width=‘+ _w +‘ height=‘+ _h +‘/>‘; }; image.src = $(this).attr(‘rel‘);//指定url var sr_img = image.src; },function(){ $(‘#pos_h_cread‘).remove(); }) });
原文：http://www.cnblogs.com/shizhouyu/p/4952634.html
