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