静态页面,在html中写定气泡元素可以直接使用,但是动态生成气泡的时候,总是无法正常出现动态效果。
原因是在动态append元素后,已渲染的tagCloud中的 items 及 options 信息并未更新,所以想办法更新就行。
以下是个人所做的一些改动:
1、在 TagCloud.prototype 中增加以下代码, 目的是更新tagCloud的属性及元素信息:
TagCloud.prototype = { _setItems: function(items) { var self = this; //更新元素信息 self.items = items; //重设元素鼠标效果 for (var j = 0, len = self.items.length; j < len; j++) { self.items[j].element.index = j; //鼠标移出子元素,当前元素静止放大 self.items[j].element. = function() { self.index = this.index; }; //鼠标移出子元素,当前元素继续滚动 self.items[j].element.onmouseout = function() { self.index = -1; }; } //重设元素位置属性 for (var j = 0, len = self.items.length; j < len; j++) { self.items[j].element.style.position = "absolute"; self.items[j].element.style.zIndex = j + 1; } } }
2、在动态追加气泡元素后,对已渲染的tagCloud做更新就好
$(".tagcloud").append(bubble); //bubble是已拼接好的气泡元素,按照源码中的<a>标签拼接就好 var items = tagCloud[0]._getItems(); tagCloud[0]._setItems(items); tagCloud[0].update();