jQuery炫酷应用实例集锦 - (EPUB全文下载)
文件大小:0.35 mb。
文件格式:epub 格式。
书籍内容:
jQuery炫酷应用实例集锦
第1章 基础实例
第2章 块实例
第3章 单选按钮实例
第4章 复选框实例
第5章 下拉框实例
第6章 文本框实例
第7章 选项卡实例
第8章 表格实例
第9章 菜单实例
第10章 图片实例
第11章 动画实例
第12章 特效实例
第13章 超链接实例
第14章 窗口实例
第15章 数据管理实例
第16章 其他实例
图书资源支持
第1章基础实例
001 以淡入淡出的效果显示或隐藏元素
本例主要采用fadeIn()和fadeOut()方法实现了以淡入淡出的显示效果显示或隐藏元素。在浏览器中显示该页面时,单击“淡出隐藏百度窗口”按钮,则该窗口将逐渐从页面中消失;单击“淡入显示百度窗口”按钮,则该窗口将逐渐从页面中显现出来,如图001-1所示。
图 001-1
主要代码如下所示:
上面有底纹的代码是本例的核心代码。在该部分代码中,fadeIn()方法用于以淡入效果显示已隐藏的元素,该方法的语法声明如下:
$(selector).fadeIn(speed,callback);
其中,参数speed是一个可选参数,它可以取slow、fast或毫秒值。参数callback也是一个可选参数,表示动作完成后所执行的方法名称。
fadeOut()方法用于以淡出效果隐藏当前的可见元素,该方法的语法声明如下:
$(selector).fadeOut(speed,callback);
其中,参数speed是一个可选参数,规定效果的时长,它可以取slow、fast或毫秒值。参数callback也是一个可选参数,表示动作完成后所执行的方法名称。
本例的源文件名是HtmlPageC025.html。
002 以卷帘效果展开或收缩被选择的元素
本例主要采用slideUp()和slideDown()方法实现了以卷帘方式展开或收缩元素。在浏览器中显示该页面时,单击第一个“收缩内容”按钮,如图002-1所示,则将下面的标题文字以卷帘方式从下到上慢慢收缩,如图002-2所示,此时第一个“收缩内容”按钮变为“展开内容”按钮;单击“展开内容”按钮,则将从上至下慢慢展开标题文字。第二个“收缩内容”按钮和第三个“展开内容”按钮只能实现按钮标题所示的单一功能,第一个按钮则集成了这两个按钮的功能。主要代码如下所示:
图 002-1
图 002-2
上面有底纹的代码是本例的核心代码。在该部分代码中,如果元素已显示,slideUp()方法则以卷帘式的滑动效果隐藏被选元素。slideUp()方法的语法声明如下:
$(selector).slideUp(speed,callback)
其中,参数speed是一个可选参数,该参数规定元素从可见到隐藏的速度,默认值为normal,可能的值包括毫秒值(比如1500)、slow、normal、fast等,在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度,这样会创造滑动效果。参数callback也是一个可选参数,表示slideUp()方法在执行完之后,将要执行的方法。除非设置了speed参数,否则不能设置该参数。
slideDown()方法用于使用卷帘式的滑动效果显示已经隐藏的被选元素。slideDown()方法的语法声明如下:
$(selector).slideDown(speed,callback)
其中,参数speed是一个可选参数,该参数规定元素从隐藏到可见的速度,默认值为normal,可能的值包括毫秒值(比如1500)、slow、normal、fast等,在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。参数callback也是一个可选参数,表示slideDown()方法执行完成之后要执行的方法;除非设置了speed参数,否则不能设置该参数;如果元素已经是完全可见,则该效果不产生任何变化,除非规定了callback函数。
slideToggle()方法通过使用高度变化的滑动效果来切换元素的可见状态,如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素,关于slideToggle()方法的更多说明请参考本书的其他部分。
本例的源文件名是HtmlPageC096.html。
003 根据可见状态确定是否显示或隐藏元素
本例主要采用toggle()方法实现根据元素的可见状态确定是否显示或隐藏元素。在浏览器中显示该页面时,单击第一个“隐藏图片”按钮,如图003-1所示,则将隐藏下面的图片,如图003-2所示,此时第一个“隐藏图片”按钮变为“显示图片”按钮;单击“显示图片”按钮,则将重新显示刚才隐藏的图片。第二个“隐藏图片”按钮和第三个“显示图片”按钮则只能实现按钮标题所示的单一功能,第一个按钮则集成了这两个按钮的功能。
图 003-1
图 003-2
主要代码如下所示:
上面有底纹的代码是本例的核心代码。在该部分代码中,如果被选的元素已被显示,调用hide()方法则隐藏该元素,hide()方法的语法声明如下:
$(selector).hide(speed,callback)
其中,参数speed是一个可选参数,该参数规定元素从可见到隐藏的速度,默认值为0,可能的值包括毫秒值(如1500)、slow、normal、fast等,在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。参数callback也是一个可选参数,它表示hide()方法在执行完成之后将要执行的方法;除非设置了speed参数,否则不能设置该参数。注意:如果元素已经是完全隐藏,则不产生任何变化,除非规定了callback函数。
如果被选元素已被隐藏,调用show()方法则显示这些元素,show()方法的语法声明如下:
$(selector).show(speed,callback)
其中,参数speed是一个可选参数,规定元素从隐藏到完全可见的速度,默认值为0,可能的值包括毫秒值(如1500)、slow、normal、fast等,在设置速 ............
以上为书籍内容预览,如需阅读全文内容请下载EPUB源文件,祝您阅读愉快。
书云 Open E-Library » jQuery炫酷应用实例集锦 - (EPUB全文下载)