08 使用jQuery处理图片和幻灯片.ppt

Web应用开发概述 Web应用开发概述 Web应用开发概述 使用jQuery处理图片和幻灯片 jQuery操作图片 jQuery实现幻灯片切换效果 综合实例：使用jQuery制作下拉菜单 小 结 jQuery操作图片 1 01 Lightbox 02 使用Jcrop剪裁图片 Lightbox 1.1 Lightbox Lightbox 是一个提供全功能图片查看器的JavaScript 库，它提供了在线图片库、图像覆盖和图片集导航功能。它可用于任何的现代的浏览器，因此用户不需要下载特别的组件，或担心浏览器的更新。Lightbox的效果类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。它的效果如图所示。 1．Lightbox的下载和使用 Lightbox的下载地址为：/projects/lightbox2，单击“DOWNLOAD”按钮即可下载。本书中使用的是版本2.7.1。将下载好的lightbox-2.7.1.zip文件解压，可以看到“lightbox”文件夹。目录结构如下图所示。 lightbox目录结构 其中，lightbox.js文件在js文件夹中，如右图所示。 lightbox.js文件位置 Lightbox 1.2 ColorBox 它是一款弹出层、轻量级的内容播放插件，效果极佳，它基于jQuery1.3，功能非常强大。ColorBox插件支持图片、图片组、Ajax和iframe等内容，可以自定义CSS样式，不需要改写ColorBox库文件就可以重写展示效果，并且支持加载预处理提示等。 Colorbox的官方下载地址为：/colorbox 使用Jcrop剪裁图片 图像剪裁是一个经常用到的功能，实现原理也较为简单，就是在本地选择好所需裁剪图片的坐标，将坐标发送到服务器，由服务器执行图片剪裁操作。 Jcrop是一个功能强大的jQuery图像剪裁插件，结合后端程序（如PHP）可以快速的实现图片剪裁的功能。Jcrop的下载地址为：/content/Jcrop_Download.html。 jQuery实现幻灯片切换效果 2 01 交叉渐变幻灯片 滚动幻灯片 02 交叉渐变幻灯片 1．滚动渐变器 和悬停特效很像，用来在两个状态之间切换。 2．淡入淡出渐变 两张图片之间的交叉渐变是比较容易实现的：总是一张图片淡入，另一张图片淡出。如果图片数量增多，在一个图片库中实现图片轮换，就稍微复杂一些了，我们需要计算出接下来显示哪张图片，并且保证显示完最后一张图片之后再重新显示第一张。 在jQuery中实现图片库轮换的常见技巧是，隐藏当前图片之外的其他图片，从而模拟出交叉渐变的效果。在切换的时候，只要隐藏当前图片，然后淡出下一张图片即可。 本实例的特效效果适合实现导航按钮。 3．使用innerFade插件实现高级渐变 innerFade插件可以让任意列表形式的内容依次淡入淡出切换显示，也可以上下切换显示。内容可以是文字、图片等。 支持各式标签：列表标签ul、li或是div、p标签都可以，可以轻松的实现如新闻或公告内容的自动随机切换显示或是图片幻灯片的播放显示等效果。 下载地址：/lab/innerfade。 滚动幻灯片 交叉渐变不是一组图片过渡的唯一方式，我们还可以将全部图片放在一个容器内，然后使用一个包裹元素隐藏全部图片，只留一张或几张图片可以看到。如果想要显示另外的图片，则将元素滚动到指定的位置即可。 综合实例：使用jQuery制作下拉菜单 3 综合实例：使用jQuery制作下拉菜单 下拉菜单是我们经常会用到的功能，鼠标经过导航图片，显示下拉菜单；当鼠标离开时，下拉菜单再隐藏。实例运行效果如下图所示。 下拉菜单 小 结 4 本章重点内容 本章讲解了jQuery中操作图片以及实现幻灯片效果。在图片操作部分首先讲解了lightbox的下载和使用，展示了Lightbox的各种效果，之后介绍了Lightbox的ColorBox插件。最后介绍了如何使用Jcrop插件来剪裁图片。第二部分为读者讲解了jQuery操作图片实现幻灯片效果的方法，其中包括交叉渐变效果和实现滚动幻灯片的效果。最后通过综合实例的讲解，让读者对本章内容在实际项目当中的应用了解得更加深刻。