[JQ权威指南]图片放大镜插件jqzoom

JQzoom是一款基于JQUERY库的图片放大插件,在页面中实现放大的方法是先准备两张一大一小的相同图片,在页面打开时展示小图片,当鼠标在小图片的任意位置移动时,调用插件中的jqzoom()方法绑定另外一张相同的大图片,在制定位置显示与小图片所选区域相同的大图片区域,从而实现逼真的放大效果。该插件非常适合在产品展示时使用。
(1)插件文件
jquery.jqzoom.js/jquery.jqzoom.css
图片资源
(2)下载地址
(3)功能描述
在页面中放置一张图片,当鼠标在图片中移动时,出现一块选择区域,在图片的右边显示放大后的所选区域。
(4)实现代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQZoom放大镜插件title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    script>
    <script type="text/javascript" 
            src="Js-7-7/jquery.jqzoom.js">
    script>
    <link rel="stylesheet" type="text/css" 
            href="Css-7-7/jquery.jqzoom.css" />
    <style type="text/css">
           body{font-size:13px}
           span{color:Red;font-size:12px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
           .divFrame .divContent{padding:8px;line-height:1.6em}
           .divFrame .divContent img{border:1px solid #ccc}
    style>
    <script type="text/javascript">
        $(function () {
            $("#jqzoom").jqzoom(
                {
                    zoomWidth:230,
                    zoomHeight:230
                }
            );
        })
    script>
head>
<body>
    <div class="divFrame">
        <div class="divTitle">
            图片放大镜
        div>
        <div class="divContent">
            <a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包">
                <img src="Images-7-7/bagsmall.jpg" />
            a>
        div>
    div>
body>
html>

(5)页面效果
[JQ权威指南]图片放大镜插件jqzoom_第1张图片
(6)代码分析
在页面中,为了实现图片放大效果,除引用插件的JS文件外,还必须导入与之匹配的CSS文件。
引用完JS和CSS文件后,接下来的工作就是将图片与插件绑定,为实现这一目的,首先在页面中增加一个标记用于显示小图片,并将图片用以个标记包裹起来;同时将标记的href属性设置为大图的URL,并设置title属性,其实现代码:

     <a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包">
                <img src="Images-7-7/bagsmall.jpg" />
            a>

然后,在JS文件中通过jqzoom()方法绑定对应的放大元素,其实现代码如下:

        $(function () {
            $("#jqzoom").jqzoom(
                {
                    zoomWidth:230,
                    zoomHeight:230
                }
            );
        })

在插件调用的jqzoom([option])方法中,可选项参数Option是一个对象,除上述zoomWidth与zoomHeight属性外,还有如下的常用属性:

$(element).jqzoom()
    {
    zoomType:   //放大镜类型,默认为"standard",如果设  为"reverse",在小图
                //片移动鼠标时,所选区域将高亮显示,非选中区域为淡灰色
        xOffset://放大后的图片与小图片间X距离
        yOffset://放大后的图片与小图片间y距离
        position://放大后的图片相对原图片的位置,默认为"right",可设置  为"left"/"top"/bottom
    lens:        //一个布尔值,表示是否显示小图片中的选择区域,默认为true 
    title:       //一个布尔值,表示是否显示放大图片的主题,默认值为true
    imageOpacity: //当zoomType的值为"reverse"时,用来设置非选中区域透明度的值,取值范围(0.0-1.0)
    }
;

你可能感兴趣的:(前端设计,JQuery)