09 27 , 2009
Tagged: Fx ,Fx.Scroll ,JS ,mootools ,mootools教程 ,动画效果 ,实例教程 ,扩展 ,滚动条 ,类 ,网页 ,锚点 |
Cat: javascript , mootools |
还是先看效果吧：
测试地址：mt1.2cn /fxScroll.html" target="_blank">http://xiebiji.com/works/mt1.2cn /fxScroll.html
实例例子压缩包：mt1.2cn
*原创文章 转载请注明出处：http://xiebiji.com/2009/09/mtscroll 作者:小Joe
Jq有提供锚点跳转的效果实例（点击这里查看jq实现的方法 ），其实mootools也有的(Fx.Scroll扩展类),具体如下实现：
ps.实例中介绍了一种全居中的css写法，有兴趣又不知道的同学可以研究一下了。^_^高手就瞄一下吧。
HTML代码：
1.我是第一锚点
2.哈？我也是锚点，我是第二个
3.第三个锚点就是我啦
4.什么？我居然是第四个锚点
5.我汗~我是最后一个锚点
目标一
目标二
目标三
目标四
目标五
css代码：
/*全居中*/
body,html{height:100%;}
#container{width:420px; height:520px;background:#000;margin:-260px a...
06 17 , 2009
Tagged: AJAX ,JS ,mootooles中文 ,mootools ,mootools 1.2 ,mootools教程 ,php |
Cat: javascript , mootools , php |
不久之前我写过一篇关于mootools运用ajax的文章《【mootools中文实例诠释】Ajax类的简单使用 》，但是这篇文章是基于mootools 1.11版本写的，今天在用1.2版(以下称mt1.2)写一个关于ajax和json调用的教程。
如果你现在在学mt1.2你会发现1.2版已经取消的Ajax这个类了，取而代之的是更强大的Request类。那要怎么实现Ajax效果呢？
老规矩还是先看效果：
http://xiebiji.com/works/mt1.2Ajax/
示例下载地址：目标另存为
html+js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
mt1.2ajax-from http://xiebiji.com
var jsonRequest;
window.addEvent('domready',function(){
jsonRequest = new Request.JSON({
url: "tellMySiteInfo.php", //请求数据链接地址，从这个...
02 15 , 2009
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...
02 03 , 2009
Tagged: AJAX ,dome ,HTML ,JS ,mootools ,mootools教程 ,中文 ,手册 ,服务器 |
Cat: mootools |
mootools 1.2 中文html手册在线版地址：
http://xiebiji.com/works/mt1.2cn/Docs/index.html
值得提示的是：
本中文参考文档由Zarknight 译制完成
获取最新版本:http://code.google.com/p/mootools-doc-cn/
感谢作者无私奉献。
mootools 1.2相对于1.6版有很多区别，js框架更新版本的时候有貌似跟php框架大有不同，js框架要充分考虑到文件大小的问题。所以一个新版本跟旧版本往往有很多区别。例如1.2的mootools没有了Ajax类，该类被Request类直接替换了。
12 24 , 2008
Tagged: AJAX ,javascript ,JS ,mootools ,mootools教程 ,中文实例 ,代码 ,使用 ,诠释 |
Cat: javascript , mootools , php |
老规矩先看效果：
点击这里 发送Ajax请求
等待中…
该实例的html代码:
简单Ajax应用
点击这里 发送Ajax请求
等待中...
该实例的mootools代码:
$('start').addEvent('click', function(e) {//给id为“start”的a标签添加单击事件
e = new Event(e).stop();//使a标签的超链接失效
var url = "http://xiebiji.com/wp-content/files/AjaxExample.php";//获取数据的地址文件,注意这个地址只能是你服务器上的地址
new Ajax(url, {
method: 'get',//传递参数的方式是用get方式，即?arr=xx的方式；
update: $('log')//当请求完成并且得到AjaxExample.php输出的数据时更新id为"log"的div标签内的内容。
}).request();//发送请求
});
是不是很容易理解?Ajax更多的参数可以...
12 22 , 2008
Tagged: Accordion ,HTML ,javascript ,JS ,mootools ,mootools中文 ,mootools教程 ,Tutorial ,实例 ,简单 ,类 ,诠释 |
Cat: javascript , mootools |
mootools里面有个能够实现类似QQ面板功能的功能类，效果？如下：
.element {
}
.element p { margin: 0; padding: 4px; }
.float-right { padding:10px 20px; float:right; }
blockquote { text-style:italic; padding:5px 0 5px 30px; }
-->
我的折叠菜单
网站简介
写笔记的小Joe，是一个记录网络笔记，趣事，心得的个人独立博客，有专有的主题风格。其中大部分内容有：mootools,js,php,falsh等电脑语言笔记，当然还有电影，音乐等娱乐资讯，有一定的访问群体。写笔记的小Joe，是一个记录网络笔记，趣事，心得的个人独立博客，有专有的主题风格。其中大部分内容有：mootools,js,php,falsh等电脑语言笔记，当然还有电影，音乐等娱乐资讯，有一定的访问群体。写笔记的小Joe，是一个记录网络笔记...