/**
* 自动调整大小
*/
updateSize:function(size){
//这里用了一个很不厚道的hack，那就是在大多数时候，我在外部就计算好要调整的高度，然后传进来，而不是在这里调整的
//当然也可以不传参数,那样这里的计算就要麻烦点
var size=size||{width:null,height:null}
//获取里面的tip的大小,后面就把外边的层的大小变成这个大小
var _height=size.height||this.tip_inner.offsetHeight;
var _width=size.width||this.tip_inner.offsetWidth;
var now_this=this;
//开始定义动画
var ani=new YAHOO.util.Anim(this.tip_outer, {height:{to:_height},width:{to:_width}},0.7)
//第一次动画结束后,文字那里通常是不对的,因为字会因为宽度变了,而改变高度,这个是动态不可预知的,所以这里
//再检查一遍
ani.onComplete.subscribe(function(){
var _height=now_this.tip_inner.offsetHeight;
var _width=now_this.tip_inner.offsetWidth;
var ani2=new YAHOO.util.Anim(now_this.tip_outer, {height:{to:_height},width:{to:_width}},0.7);
ani2.animate();
});
ani.animate();
},
注释很详细,无需多说了,这个对象只剩下一个函数了,那就是填充数据,这个函数可以多次执行,每次都会导致数据变化和大小的变化
复制代码 代码如下:
/**
* 改变填充数据
* @param data 一个json对象,包括三部分的数据{hd_data:"",pic_data:"",bd_data:""}
*/
updateData:function(data){
this.data={
hd_data:null?"没有描述":data.hd_data,//标题的数据
pic_data:null?"#":data.pic_data,//图片数据,正常情况下应该是一个网址
bd_data:null?"没有描述":data.bd_data//主题内容数据
}
//填充数据
this.tip_title.innerHTML=this.data.hd_data;
this.tip_bd.innerHTML=this.data.bd_data;
this.tip_pic.innerHTML=""
this.tip_pic.appendChild(this.loading_pic)
var now_this=this;
//填充图片
this.pic=new Image();
this.pic.src=this.data.pic_data;
this.pic.errorpic=new Image();
this.pic.errorpic.src="https://www.jb51.net/logo.gif";//图片加载错误时显示的图片
this.pic.onload=function(){
now_this.tip_pic.innerHTML="";
now_this.tip_pic.appendChild(this)
now_this.updateSize({width:this.width+20});
}
this.pic.onerror=function(){
now_this.tip_pic.innerHTML="";
now_this.tip_pic.appendChild(this.errorpic)
now_this.updateSize({width:this.errorpic.width+20});
}
this.updateSize();
},
到这里这个对象就结束了,是不是很简单,他已经很完整了,下面我们就来启动它,我们设置一些数据,然后随机地填充,每次点击页面都会填充不同的数据.
复制代码 代码如下:
window.onload = function(){
AddLink.init({
class_name: "content"
});
Tip.init();
document.body.onclick=function(){
Array.prototype.rand=function(){
return this[Math.round(Math.random()*(this.length-1))];
}
var hd_arr=[
"我是随机的你信不信",
"不信算了,点击页面我就会变了",
"每点一次都会变",
"也有可能重复的",
"重复的我可不管饿,因为我是随机的"
];
var pic_arr=[
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-20-53-231.png",
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-15-23-51-45.png",
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-16-00-25-38.png",
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-23-25-171.png",
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-20-49-362.png",
"http://dgdgdg.d"
]
var bd_arr=[
"最近听人说aptana这个ide不错,也支持我喜欢的ruby,而且对js和html,css支持也很好,我比较来比较去,还是喜欢netbeans,首先因为netbeans里有个插件,可以把着色的代码复制粘贴成html+css,而是代码着色aptana不好看,自己配又配不出感觉来,net串get什么什么的就行了.js已经是够简洁的语言了,提醒太多反而没什么意义,不过在netbeans里的YUI提示和我看的YUI不是一个版本的,全是错的,但是我还是喜欢netbeans多一点,其实编程这东西效率很难说高和低,思路理清楚了,自然效率高.程序写的很快的话,代码提示很智能的话,反而太依赖,对思路理解不深刻,写着后面忘了前面,效率反而慢了",
"后可以做一些基本的处理,例如加个边框美化下,可以用画笔涂一下,这个比较有用,高清图上有字的背景图,可以涂掉就可以直接用了.下面说一下其他功能吧, 首先,最重磅的就是”标尺”,可以",
"代码复制粘贴成html+css,而是代码着色aptana不好看,自己配又配不出感觉来,netbeans的界面也比较清爽,至于js提示,其实我从来就没用到过高级的提示,在netbeans里我只需要他在我输入document.的时候出来后面那一串get什么什么的就行了.js已经是够简洁的语言了,提醒太多反而没什么意义,不过在netbeans里的YUI提示和我看的YUI不是一个版本的,全是错的,但是我还是喜欢netbeans多一点,其实编程这东西效率很难说高",
"这里我只拿我的几个比较宽泛的想法来谈自己对top平台的理解,为自己保留一条秘密,同时也跟大家分享自己的想法.现今社会,很多产业都已经趋向于饱和,例如:超市行业.在南京,苏果超市占据了绝对地位.随处可见其身影,当然也有类似华联和家乐福之类的超市经提供了上述服务了,但是我们可以通过来提供更多个性服务来增加自己的竞争力.我其实也正在策划做一个公益性的垂直搜索网站,可能会争取到政府的资金支持,但是目前我除了我女朋友还没有跟任何人透露过,如果有人对此感兴趣可以找我讨论."
]
var config={
hd_data:hd_arr.rand(),
pic_data:pic_arr.rand(),
bd_data:bd_arr.rand()
}
Tip.updateData(config);
}
}