前言：

在做前端的項目中，經常看到移動一個小圖標上顯示這個圖標對應的大圖的提示，之前的做法是在小圖標的位置后面添加一個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');//創建一個divvar 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添加一個IDdiv.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');//指定urlvar 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();

?

轉載于:https://www.cnblogs.com/shizhouyu/p/4952634.html

總結

以上是生活随笔為你收集整理的javascript 动态创建tip图片提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。