javascript 动态创建tip图片提示

前言：

在做前端的项目中，经常看到移动一个小图标上显示这个图标对应的大图的提示，之前的做法是在小图标的位置后面添加一个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();
})
});

3、原生js实现

var tooltip = {
getpos:function(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 };
},
isSelector:function(){
return !! document.querySelector ? true : false;
},
init:function(){
var box = [];
if(this.isSelector()){
box = document.querySelectorAll('.tooltip');
}else{
var a = [];
var elm = document.getElementsByTagName('*');
var _l = elm.length;
for(var i=0;i<_l;i++){
if(/\s*tooltip\s*/.test(elm[i].className)){
a.push(elm[i]);
}
}
box = a;
}
for(var i=0;i< box.length;i++){
box[i].onmouseover = function(){
var _this = this;
var pos = tooltip.getpos(_this);
var div = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = '<img src="http://cache.shumenol.com/act/plugin/tooltip/loading.gif" width="50" height="54"/>';
div.appendChild(p);
div.id = 'pos_h_cread';
div.style.position = 'absolute';
div.style.zIndex = 9999999;
div.style.left = pos.absoluteLeft + 'px';
div.style.top = (pos.absoluteTop + pos.offsetHeight)+ 'px';
document.getElementsByTagName("body")[0].appendChild(div);
var image = new Image();
image.src = _this.getAttribute('rel');
image.src = _this.rel;
var sr_img = image.src;
image.onload = function(){
var _w = this.width;
var _h = this.height;
div.innerHTML = '<img src='+ sr_img +' width='+ _w +' height='+ _h +'/>';
};
image.src = _this.getAttribute('rel');
image.src = _this.rel;
sr_img = image.src;
}
box[i].onmouseout = function(){
var n = document.getElementById('pos_h_cread');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
}
}
}
}
tooltip.init();