Tagged: css,event.page,HTML,javascript,JS,mootools,mootools教程,tips,特效 |
Cat: javascript, mootools |
虽然mootools有自带的tips特效，但是样式固定，而且我发现mootools那个Tips有时候会报错的，假如你在ie中进我博客时，马上把鼠标移动到那个‘Chromatography Ads’下面的那些小色块上面，很有可能会马上弹出个对话框说’http://xiebiji.com。’打不开的提示，留意一下那个地址最后多了一个句号，那当然打不开啦。我被这个问题郁闷了很久，最后还是没有解决。
所以今天特意把之前写过的tips特效从网页中提取出来：
先看看效果:http://xiebiji.com/works/tips/
html代码如下：
xiebiji.com
A Link
css代码如下:
body{
background:#000;
}
a{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}
ul{
margin:0;
padding:0;
}
li{
float:left;
margin:5px 10px 0 0;
backgrou...
Tagged: javascript,joe,JS,mootools,mootools教程,onHide,onShow,tips,Tips类,Tutorial,代码,元素集合,方便,私房猫 |
Cat: javascript, mootools, 网络笔记 |
mootools的Tips类是非常简单易用，但又非常强悍的。看以下例子：
以下是html
无标题文档
window.addEvent('domready', function() {
//这里填写本实例mootools代码
});
http://xiebiji.com
本实例CSS代码
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}
.tool-title {
font-weight: bold;
font-size: 12px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background:#000000 top left;
}
.tool-text {
font-size: 12px;
padding: 4px 8px 8px;
background:#000000 bottom right;
}
.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}
.custom-title {
font-weight: bold;
font-size: 12px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}
.custom-text {
font-size: 12px;
padding: 4px 8px 8px;
background: #CF...