网页上奇奇怪怪的焦点图有很多种,通常可以使用 JavaScript、jQuery、CSS 以及已经过气的 flash 实现,本文中,我在此安利一发 myFocus 焦点图库。利用 myFocus,我们可以很方便地制作多种风格的焦点图。

下载 myFocus 焦点图库

myfocus
下载主页

myFocus 是一个独立的 JavaScript 库,利用 myFocus 库 + myFocus 风格应用(包含各种风格样式)就可以制作焦点图了。因此,我们在这里下载 myFocus 库文件和 myFocus 风格应用文件并解压至同一个文件夹下,通常会在我们保存各种 JavaScript 代码的 js 文件夹下。

js

mf-pattern 文件夹下的每种风格应用文件是由一个 JavaScript 文件和 CSS 文件组合而成。

在网页中引入 myFocus

首先在 head 标签内引入 myfocus-2.0.1.min.js 文件和 一个风格应用 .js 文件和 .css文件,例如 slide3D.jsslide3D.css

利用 myFocus 制作焦点图

首先在 html 代码中建立一个放置焦点图的 div 盒子,并给它设置一下 CSS:

CSS 代码:

HTML 代码:

然后在 head 标记结束前,调用 myFocus 自带的方法启用焦点图效果:

现在再预览一下你的页面,是不是焦点图已经制作完成了?

结论

myFocus 还提供了载入画面、参数的调用以及各种 API 调用的方法,作者提供了详细的方法,并且在他的 Demo 页面上可以自己选择不同的风格效果用来参考,如果有你喜欢的就简单地修改一下引入文件的文件名就可以了,myFocus 的确是个方便高效制作焦点图的利器!

Tagged:

发表评论

电子邮件地址不会被公开。 必填项已用*标注