第11章--jQuery插件应用.pptVIP

第11章 jQuery插件应用 学习目标 1．了解jQuery插件 2．学会使用图片放大镜插件 3．学会使用TAB选项卡插件 4．学会使用图片轮播插件 5．了解插件编写 本章任务 任务1：使用jqZoom插件实现图片放大镜效果 任务2：使用Fancybox插件实现图片播放效果 任务3：编写表格隔行变色插件 任务1：使用jqZoom插件实现图片放大镜效果 任务描述： 使用jqZoom插件实现图片放大镜效果，如图所示： 实现思路 1. 完成静态页面设计，并在相关元素中添加class属性。 2. 下载jqZoom插件。 3. 引入jQuery库、jqZoom插件和jqZoom插件的CSS样式。 4. 根据效果需求设置相关参数。 jqZoom插件简介 jqZoom是一个jQuery图片放大镜插件。 插件参数： zoomWidht指小图片所选区域的宽度。 zoomHeight指小图片所选区域的高度。 zoomType默认值为standard。如果设为reverse，在小图片仲，移入鼠标时，所选 区域高亮，非选中区域淡灰色。 xOffset指放大后的图片与小图片间的X(横坐标)距离。 yOffset指放大后的图片与小图片间的Y(纵坐标)距离。 position指放大后的图片相对原图片的位置，默认为“right”,还可设置为“left”、“top”、“bottom”。 jqZoom插件简介 插件参数： lens值为布尔值，表示是否显示小图片中的选中区域，默认值为true,如果设为false，则放大后的图片上面不会出现主题字样。 imageOpacity参数是当zoomType的值为reverse时，用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。 preloadImages值为布尔值，表示是否重新加载大图像。 preloadText是重新加载大图像时，小图像显示的文本说明。 title是指大图像顶部是否显示a标签里的title。 showEffect是大图像加载时的特效，可选值:“show”表示直接显示，“fadein”由透明度渐变载入效果。 jqZoom插件简介 插件参数： hideEffect是大图像隐藏特效，可选值hide表示直接隐藏，fadeout透明度渐变隐藏。　　 fadeinSpeed是当大图像的载入特效设为fadein时，此属性可设置特效的时间，可选值为fast,slow,number分别代表，快慢，毫秒数。 fadtoutSpeed是当大图像的隐藏特效设为fadeout时，此属性可设置特效载的时间，可选值为fast,slow,number分别代表，快慢，毫秒数。 任务实现 1.引入jqZoom插件与jqZoom样式 script src=js/jquery-min.js type=text/javascript/script script src=js/jqzoom.pack.1.0.1.js type=text/javascript/script link rel=stylesheet href=css/jqzoom.css type=text/css 任务实现 2.使用jqZoom插件实现图片放大镜效果 …… $(function() { $(.jqzoom).jqzoom(options); });//应用插件 …… 任务2：使用Fancybox插件实现图片播放效果 任务描述 使用Fancybox插件实现如左图和右图所示的图片播放效果。 当用户单击小图时，呈现相应的大图。 实现思路 1. 完成静态页面设计。 2. 下载Fancybox插件。 3. 引入jQuery库、Fancybox插件和Fancybox插件的CSS样式。 4. 根据效果需求设置相关属性和参数。 Fancybox插件简介 Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。Fancybox?是一款绚丽的 jquery 弹出层展示插件，该lightbox除了能够展示图片之外，还可以展示iframed内容，通过css自定义外观。 任务实现 1.引入jquery核心库和Fancybox插件库 script src=js/jquery-min.js type=text/javascript/script script type=text/javascript src=js/jquery.fancybox-1.3.4.pack.js/script 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本。 script type=text/javascript src=/fancybox/jquery.easing-