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();