jquery图像浏览器-图片放大浏览

jquery图像浏览器-图片放大浏览
 点击预览  点击下载

开发过程

自从接触到jquery之后,我发现其实这类效果是可以用js实现的,但由于是初次接触js,水平有限,就开始从简单的效果做起,起初只是点击出来大图,再点击关闭大图,毫无动画效果可言,但一次次的改进也使我很有成就感。

从起初的几段代码到后来的函数相互调用,再到后来的函数封装,直到现在初具雏形的图像浏览器插件,一点点的进步使我感觉到勤于思考、循序渐进的学习方式对自己还是很有帮助的,由于该插件多少有点儿复杂,开发过程就不多说了,直接说说现在成型的插件吧!小剧客栈

插件分析

下载文件里的photoMode.js是封装好的完整的图像浏览器插件,CSS主要作用是美化界面你可以下载源码再研究。

整个插件核心骨架只是change(src,alt)、 prev()、next()这三个函数,其余的代码纯粹是对整个图像浏览器起到锦上添花的作用。

change(src,alt):这个函数在整个插件中所起到的作用是最大的,因为既然是图像浏览器,肯定就得有切换图片的功能,change(src,alt)就是做这件事情的函数。其工作原理是:接受传入新图片的地址(src)和标题(alt),改变图像的标题,渐隐当前图像,图像外框动态变化到新图片的尺寸,然后渐显新图片。这个过程很简单,但是开发时却碰到了火狐的一点小小的差异(见:火狐下用jquery更换图像src后获取图像尺寸异常的问题)

prev()、next():如果说change函数是杀人凶手的话,那prev()和next()就是不折不扣的幕后主使,因为无论是鼠标点击相应按钮,还是按下键盘的左右方向键,都是通过prev()、next()来调用change()函数实现效果的。

在图像显示过程中,涉及到jquery对浏览器、元素位置及尺寸的定义还有滚动的计算,可以参考之前的一篇文章理解(图解JQUERY尺寸及位置定义)。

如何使用插件

正确引用了jquery文件,再引入potoMode.js、potoMode.css,或者将potoMode.js和potoMode.css的内容分别写入你用使用的js与css即可。使用时按照下面书写代码即可:

  1. //通用格式 
  2. $(你的选择器).photoMode(); 
  3. //下面是示例 
  4. $('#article img').photoMode(); 
  5. $('.section img').photoMode(); 
  6. $('#article img, .section img').photoMode(); 

注意:这里书写的选择器一定要是图片的路径。

转载请注明:代码家园 » jquery图像浏览器-图片放大浏览

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)