• Cloud Zoom 一个小型的图像放大镜插件


    Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom。相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性。

    Cloud Zoom

    特点

    1、兼容大多数浏览器,(已经测试通过的浏览器有:IE6+, Firefox, Chrome, Opera, Safari)
    2、易于集成的基本有效的HTML。
    3、(精缩)脚本小,只有6Kb。
    4、平滑变焦运动。
    5、画廊模式。
    6、着色,软聚焦和内变焦功能。
    7、它是完全免费的。

    使用方法

    1、加载CSS:

     <link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" />

    2、加载Javascript:

     <script type="text/JavaScript" src="/js/jquery.1.4.2.min.js"></script>
    <script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>

    3、HTML代码:

    <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
    <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
    <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2' rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
    <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
    <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'  rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
    <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    插件参数一览表

    参数 描述 (from V1.0.0) 默认值
    zoomWidth 设置缩放窗口的宽度,如果设置为"auto"则窗口宽度与小图片宽度相等。 'auto'
    zoomHeight 设置缩放窗口的高度,如果设置为"auto"则窗口高度与小图片高度相等。 'auto'
    position 指定缩放窗口相对于小图片的位置。允许的值是 'left', 'right', 'top', 'bottom', 'inside' ,也可以是专门一个HTML元素的ID放置例如窗口的缩放位置:'element1' 'right'
    adjustX 允许你微调像素的缩放窗口的X位置。 0
    adjustY 允许你微调像素的缩放窗口的Y位置。 0
    tint 指定覆盖的小图片的颜色。颜色应指定十六进制格式,例如'#aa00aa'。 false
    tintOpacity 指定色彩的透明度,其中0是完全透明的,1是完全不透明。 0.5
    lensOpacity 设置镜头鼠标指针的透明度,其中0是完全透明的,1是完全不透明。在色彩和软对焦模式,它将始终是透明的。 0.5
    softFocus 适用于一种微妙的模糊效果来的小图片。设置为true或false。 false
    smoothMove 形象的漂移缩放,数字越高,就越顺畅/更轻松进行漂移运动。 1 =不平滑。 3
    showTitle 是否显示图片的标题. true
    titleOpacity 指定是否显示标题不透明度,其中0是完全透明的,1是完全不透明。 0.5
    【Demo】 点击次数   官方主页【官方主页】   下载地址【下载地址】

    网友留言/评论

    我要留言/评论

    相关开源项目

    ImageMenu:一个图片展示控件。当鼠标移到某一张图片时将展开整张图片。
    Showcase:Showcase是Prototype的一个扩展,能够以CoverFlow效果展示一整组图片。展示方向可以是:水平、垂直或倾斜。
    QuickBox:QuickBox是一个基于Mootools1.2版本开发的Lightbox控件。与其它Lightbox控件相比,它最大不同之处在于可以利用鼠标滚轮控制图片切换。
    Hoverbox Image Gallery:这是一个采用纯CSS实现的照片Gallery。当鼠标经过时图片会自动放大。
    Galleria:Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以在图片加载时执行一些动作。
    Lightview:Lightview是一个基于Prototype与Script.aculo.us开发,用于创建可以覆盖整个页面的模式对话框。展示的内容不仅可以是图片、文字、网页、通过Ajax 调用的内容,还可以是Quicktime/Flash影片都能够以非常酷的效果展示。
    jQuery Image Scale Carousel:这个jQuery插件能够简单的将一个图片数组转换一个照片放映器并支持利用向前和向后按纽控制浏览或者设置成自动播放。这个插件还能够将图片自动缩放至适当的比例以保持屏幕高宽比。
    Zooma:Zooma是一个图片放大镜jQuery插件。
    Carousel.us:Carousel.us是一个prototype.js和scriptaculous.js框架开发的Javascript 3D carousel。
    Pikachoose:Pikachoose是一个轻量级jQuery插件,能够很方便地以幻灯片、导航按纽控制或自动播放的方式展示一组照片。