Mootools 1.2教程 Fx.Tween的使用

2016年07月27日 9 阅读

和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极“炫”的效果——可以很平滑地发生形变动画，从而改善你的用户体验。 Tween的快捷方法 我们通常都从“基本知识”入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用起来都极其简单以至于我忍不住要从这里开始。 .tween（）; 一个渐变（tween）是一个在两个样式属性值之间的平滑的变化。举个例子，...

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

2016年07月27日 6 阅读

我们将学习如何使用Fx.Morph（它从本质上可以让你同时渐变多个样式表属性），然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项，最后我们将看看如何使用Fx事件，譬如“onComplete”和“onStart”。通过这些选项和事件，我们可以获得更好的控制权来控制形变动画。 Fx.Morph 创建一个新的Fx.Morph 初始化一个新的形变和创建一个新的渐变很类似，除了你要指定多个样式属性以外。 参考代码： 复制代码 代码如下: //...

MooTools 1.2中的Drag.Move来实现拖放

2016年07月27日 8 阅读

它的使用和我们见过的其他的插件类似：首先你使用“new”关键字来创建一个Drag.Move对象并赋值给一个变量，然后你再定义你的选项和事件。这就是全部要做的事情，不过你一定要注意一下下面的例子中描述的IE的CSS怪异现象。 基本用法 Drag.Move 创建你自己的拖动对象非常的容易。稍微看一下下面的例子就行了。注意一下我们是怎么把我们的Drag.Move对象的选项和事件从我们的Drag选项和事件中分离出来的。Drag.Move类扩展了Drag类，因此它可...

Mootools 1.2教程 正则表达式

2016年07月27日 7 阅读

如果你还不熟悉怎么使用正则表达式（regular expression（regex）），我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接，尤其是文章结尾“更多学习”部分的链接。我们今天只是讲一讲正则表达式最基本的用法，正则表达式能做的远远超过我们今天所讲的内容。 基本用法 test（）方法 它的简单在于，一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为RegExp对象提供了它自己的test（）方法，MooTools...

Mootools 1.2教程 定时器和哈希简介

2016年07月27日 9 阅读

定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面，hash则是键值对（key/value）的集合。如果你对hash还不熟悉现在也不要着急——我们今天就会做一个快速简要的介绍，并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样，一旦你看到它的正确用法，它使用起来就非常的简单，并且不可思议的有用。 .periodical（）函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical（）;，...

Mootools 1.2教程 滚动条（Slider）

2016年07月27日 9 阅读

尽管滚动条（Slider）遵循这个熟悉的模式，但是任然还有一点特殊的地方。 基本用法 创建一个新的滚动条（Slider）对象 我们首先从HTML和CSS开始。基本的想法是创建一个滚动条的div，因此是一个长的长方形（长度取决于我们用滚动条做什么），还有一个子元素作为滑块。 参考代码：复制代码 代码如下: <div id="slider"><div id="knob"></div></div> 我们的CSS也...

Mootools 1.2教程 排序类和方法简介

2016年07月27日 8 阅读

Sortables类还提供了包括一个名叫“serialize”的优秀方法，通过这个方法你额可以把这些元素的id作为数组输出——对于服务器端的开发非常有用。接下来，我们看看如何创建一个新的排序项集合，还有一定要看一下最后的演示实例。 基本知识 创建一个新的Sortable对象 首先，我们要把我们要排序的元素赋值给变量。对于Sortables来说，如果你想要多个列表之间的元素能够在相互之间拖拽，你需要把这些元素全部都放在一个数组中，就像这样： 参考代码： 复制...

Mootools 1.2 手风琴（Accordion）教程

2016年07月27日 9 阅读

创建和配置一个基本的手风琴很简单，但是你一定要认真看完全文，因为更多的高级选项可能有一些复杂。 基础知识 创建一个新的手风琴 要创建一个新的手风琴，你需要选择一些成对的元素——包含标题和内容。因此，首先，需要给每一个标题和每一个内容块分别指定一个css类名： 参考代码： 复制代码 代码如下: <h3 class="togglers">Toggle 1</h3> <p class="elements">Here is th...

Mootools 1.2教程 类（一）

2016年07月27日 7 阅读

简单地讲，一个类就是一个容器，这个容器包含了一些变量集合和操作这些变量的函数，以便实现特定的功能。在一个内容牵涉较多的项目中，类会显得难以置信的有用。 变量 在前面一系列的课程中，我们已经学习过了Hash对象中键值对（key/value pair）的使用方式，因此，下面的这个例子中创建了一个类，它只包含了一些变量，你看起来可能会觉得非常的熟悉： 参考代码： 复制代码 代码如下: // 创建一个名为class_one的类 // 包含两个内部变量 var Cl...

Mootools 1.2教程 Tooltips

2016年07月27日 6 阅读

我们还将仔细学习一下工具提示的选项和事件，还有一些用来从元素上添加和移除工具提示的工具。最后，我们将学习一下怎么让一个页面有多个不同样式的工具提示。 基础知识 创建一个新的工具提示 创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接： 参考代码： 复制代码 代码如下: <a class="tooltipA" title="1st Tooltip Title" rel="here is the default "text" of 1...

Mootools 1.2教程 选项卡效果（Tabs）

2016年07月27日 7 阅读

简单的“额外信息”标签（TAB） 鼠标移上去显示内容的TAB 在这第一个项目中，我们要创建一个简单的菜单，当鼠标移动到这些菜单上时显示相应的内容。首先，我们来完成HTML代码——我们就用包含四个列表项的ul好了，然后再创建四个div（每一个div对应一个列表项）： 参考代码： 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li id="tw...

Mootools 1.2教程（21）——类（二）

2016年07月27日 8 阅读

Fdream注：原文好像少了一部分，因此我自作主张地补充了下面这一段及BaseClass的代码。 在今天的教程中，我们将主要学习一下MooTools中类的实现和继承（扩展）。通过实现和继承，我们可以在子类中使用父类的方法，而不需要再重新声明和实现相同的方法。MooTools中的Class类可以帮助我们轻松地做到这一点。首先，我们定一个基类（base class）。 参考代码： 复制代码 代码如下: var BaseClass = new Class（{ /...

Mootools 1.2教程 同时进行多个形变动画

2016年07月27日 10 阅读

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。 基本用法 使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start（{}）方法和.set（{}）方法。 为了保证事情简洁，让我们首先建立一个元素数组，以用来传递给Fx.Elements。 参考代码： [复制代码] [保存代码] var fxElementsArray = $$（".myElementClass"）; 现在...

Mootools 1.2教程 滑动效果（Slide）

2016年07月27日 9 阅读

基本用法 就像我们前面看过的所有类一样，我们在把这个类应用到一个元素上面时，我们要做的第一件事就是初始化一个新的Fx.Slide实例。 首先，让我们为滑动元素建立一个HTML文件。 参考代码： 复制代码 代码如下: <div id="slide_element" class="slide">这里是要滑动显示的内容。</div> 我们的CSS也不需要任何修饰。 参考代码： 复制代码 代码如下: .slide { margin: 20...

不安全的常用的js写法

2016年07月27日 7 阅读

复制代码 代码如下:document.write（"<scr"+"ipt src="http://a.com/b.js" type="text/javascript"></scr"+"ipt>"）; 直到被杀毒软件提示有恶意代码才发现这也是不安全的，汗…… 那就只好改成这样了： 复制代码 代码如下:（function（） { var s = document.createElement（"script"）; s.type = "te...

javascript 检测浏览器类型和版本的代码

2016年07月27日 9 阅读

检测浏览器及其版本的代码 复制代码 代码如下: getBrowser : function（）{ var browser = { msie: false, firefox: false, opera: false, safari: false, chrome: false, netscape: false, appname: "unknown", version: 0 }, userAgent = window.navigator.userAgent.to...

在IE下获取object（ActiveX）的Param的代码

2016年07月27日 9 阅读

为了清晰起见，下面用最简单的HTML和JavaScript来说明。有这么一段HTML（head部分是标准的head，doctype使用xhtml-transitional的DTD）： 复制代码 代码如下:<body> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockw...

ExtJS 配置和表格控件使用第1/2页

2016年07月27日 9 阅读

ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0，但是本文主要介绍2.2版本。 一、ExtJS下载以及配置 1、下载地址：www.extjs.com/...

javascript 弹出层居中效果的制作

2016年07月27日 7 阅读

问题:做一个带拖动的弹出层效果（像提示框那种） 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d...

javascript 缓冲效果实现代码 推荐

2016年07月27日 9 阅读

菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下:function f_s（） { var obj = document.getElementById（"top"）; obj.style.display = "block"; obj.style.height = "1px"; var sw = function （） { var s_width = parseInt（obj.style.height）; if （s_width < 3...