Welcome, Old Sport!

Mootools插件之提示框

by ilikecss ON 2011/09/07 6383

MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架;它为web开发者提供了一个跨浏览器js解决方案;它提供了一个比普通js更面向对象的document API。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools是一个非常优秀的Javascript框架,更多精髓部分等待你去发掘。

Step1. 创建HTML

<a href="http://ilikecss.com" class="Tips" title="Sunflowa Media - Green,Reliable,Funny Web Design.">web designer</a>

Step2. 创建CSS

.tool-tip {
	color: #fff;
	z-index: 13000;
	background: #333;
	border-radius: 3px;
}
.tool-title {
	font-size: 1.2em;
	margin: 0;
	color: #FE4902;
	padding: 8px 8px 8px;
}
.tool-text {
	font-size: 11px;
	padding: 0px 8px 8px;
}

Step3. 插入脚本

window.addEvent('domready', function(){
	/* Tips*/
	var i = new Tips($$('.Tips'), {
	initialize:function(){
	this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 400, wait: false}).set(0);
	},
	onShow: function(toolTip) {
	this.fx.start(1);
	},
	onHide: function(toolTip) {
	this.fx.start(0);
	}
	});
}); 
4条评论
  1. #1

    lz什么的最好了说道:

    谢谢分享~

  2. #2

    lz什么的最好了说道:

    喂,给你介绍个好玩的东西,个性化壁纸,传送门: http://ionz.com.br/index.html
    这里有介绍,很好玩 : http://qing.weibo.com/1951657750/7453ef16330003v2.html




TOP