静态页面,在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();