基于jQuery的鼠标轮驱动画面切换效果的实现

jQuery可以产生与flash相媲美的动画效果。这是毫无疑问的。本文将通过一个实例演示基于鼠标滚轮驱动的图像切换效果。
这个例子的效果：

当鼠标滚轮滚动时，图片被切换。

支持键盘方向键，实现图像切换效果。

支持点击图片切换，支持点击当前图片链接。

进度滑块显示图片和图片的数量。

XHTML



div.demo是包含的所有元素的整个轧制效果所需的外层。# imageflow是必要的，和元素的名称包含在它不能被修改，如果你真的想改变它，你需要定义或直接修改js代码。#加载用于加载一个动画图片，当然你也可以写加载或其他文字，#标题是用来显示图片的标题。#图像的地方，你想滚动图片，数量不限。#滚动条进度条显示的图片。#滑块是一个滑块。当图片被切换时，滑块滑动到相应的位置以显示图片的位置。

CSS

。演示{宽度：860px；身高：300px；保证金：20px汽车；位置：相对；背景：# e8f5fe；溢出：隐藏}
#图像{ margin: 20px 00 60px；宽度：860px }
#图像img {位置：绝对；边距：- 160px }
#加载{ margin: 0；颜色：# FFF；文本对齐：中心}
#加载img {位置：相对；保证金：0 }
#字幕{位置：相对；身高：24px；线高度：24px；顶部：100px；左：320px；背景：URL（图像/ cap_bg。PNG）没有重复的中心和中心；
#滚动条位置：{相对；顶部：- 100px；身高：2px；Z指数：10001背景：# abcd3a URL（图像/卷。GIF）repeat-x；
}
#滑块位置：{绝对；宽度：15px；身高：4px；保证金：- 1px 00 - 1px；背景：URL（图像/酒吧。GIF）没有重复；Z指数：10002 }
CSS是整个效果实现的关键部分，如果CSS没有得到很好的控制，它将无法得到您想要的效果。

。演示设置宽度和高度，并设置位置：相对溢出：隐藏，使鼠标滑轮滚动的范围可以是有限的。演示。#图像集的边际值和设置内部IMG的相对定位。#标题设置样式来显示图片的标题。我注意到，我使用了半透明的图片cap_bg.webp作为背景图像，并且不支持IE6下透明的PNG图片，所以你需要做相关处理。接下来，看看如何设置滚动进度条和滑块，以及如何设置的位置和深度设置。只有当你慢慢地测试，你才能知道奥秘。

介绍jQuery库和滑动js文件
所有的行动都是在imageflow.js JS，我只做了一个微小的改变，你可以直接使用它。

现在你可以看到效果了，但是有问题：

你如何得到图片连接地址

最后的效果是点击当前图片并连接到一个页面来显示图片的详细信息。然后这个链接地址是如何获得的，可能在第二百五十二行的开头，有这两行代码：

image.url = image.getattribute（longdesc ）；
image.ondblclick =函数（）{ document.location =这个URL；}。
你可以看到，图片的链接地址来自它的属性：longdesc，当图片被点击时，页面会跳转到相应的页面地址。现在让我们回到第一的XHTML代码，只是指定每个图片longdesc属性和值设置为对应的网页地址，作为：
现在，任务完成后，在这个例子中，你会发现你根本不需要一个jQuery代码，因为imageflow已经做了所有的操作代码。
以上是本文的全部内容，希望能对大家有所帮助。