jQuery插件之jqzoom

jqzoom是一款基于jQuery的图片方法插件。

使用方法:1.引入jQuery与jqzoom,jqzoom.css

     2.准备两张一大一小大小相同的图片,小图片放在<img>标签的"src"属性里,给img标签加个<a>标签,<a>标签的"href"属性链向大图片

参数说明:zoomWidht:  小图片所选区域的宽度。

     zoomHeight:   小图片所选区域的高度。

     zoomType:   默认值为standard。如果设为reverse,在小图片仲,移入鼠标时,所选区域高亮,非选中区域淡灰色。

     xOffset:    放大后的图片与小图片间的X(横坐标)距离。

     yOffset:    放大后的图片与小图片间的Y(纵坐标)距离。

     position:     放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"。

     lens:      布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为"false",则放大后的图片上面不会出现主题字样。

     imageOpacity: 当zoomType的值为"reverse"时,用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

     preloadImages:布尔值,表示是否重新加载大图像。

     preloadText:  重新加载大图像时,小图像显示的文本说明。

       title:      大图像顶部是否显示<a>标签里的title。

     showEffect:   大图像加载时的特效,可选值:"show"表示直接显示,"fadein"由透明度渐变载入效果。

     hideEffect:   大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。  

     fadeinSpeed:  当大图像的载入特效设为"fadein"时,此属性可设置特效的时间,可选值为‘fast‘,‘slow‘,number分别代表,快慢,毫秒数。

     fadtoutSpeed:  当大图像的隐藏特效设为"fadeout"时,此属性可设置特效载的时间,可选值为‘fast‘,‘slow‘,number分别代表,快慢,毫秒数。

例子:

     HTML代码:

<body>
    <div style="margin-left:500px;">
        <a id="img1" href="/1big.jpg" title="我的星星" ><img src="/1small.jpg"  /></a>
    </div>
</body>

     js代码:

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script src="jquery.jqzoom-core.js" type="text/javascript"></script>
    <link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $(‘#img1‘).jqzoom({
                zoomWidth:200,
                zoomHeight:200,
                position:"bottom",           yOffset:50,
                lens:true,
                imageOpacity:1.0
            });
        })
    </script>
时间: 2024-10-21 17:04:05

jQuery插件之jqzoom的相关文章

jquery插件jqzoom放大镜插件特效代码分享

原文:jquery插件jqzoom放大镜插件特效代码分享 源代码下载地址:http://www.zuidaima.com/share/1550463469554688.htm 放大镜插件效果是当前电子商务系统的一个不可缺的部分,值得学习哦 代码截图:

16个非常酷的jQuery插件

摘要: 下面所有的插件有很大的功能,我相信大多数会帮助你即将到来的项目.借助他们可以使你的网站更加绚丽多彩. Lens Flare in JavaScript 这个jQuery插件可以帮助你处理图片,比如你可以在图片上添加一束光.下面这个图,可以控制太阳绕着地球旋转 How to Create Ajax Search Using PHP jQuery and MYSQL 这是一个基于Ajax的搜索框. Awesome Cufonized Fly-out Menu with jQuery and

jquery插件cloud-zoom(放大镜)

效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 查看演示 特点 兼容大多数浏览器,(已经测试通过的浏览器有:IE6+, Firefox, Chrome, Opera, Safari) 易于集成的基本有

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

12个最新免费的jQuery插件周报#5(2015年)

(06/03/2015 至 13/03/2015)这周收集的12个最好.最新的12个免费jQuery插件 Elastic SVG Sidebar Material Design 弹性SVG侧栏导航,受 Material Design 启发 Animating labels for input form 非常适合于小屏幕的动画浮动标签. jQuery Light Carousel Light Carousel 是一个轻量级的响应式 jQuery carousel轮播. jQuery polygon

jquery 插件 起步代码

/** * Created by W.J.Chang on 2014/6/25. */ ;(function($) { var methods= { check: function() { return this.each(function() { this.checked = true; }); } }; $.fn.pager = function(method) { if ( methods[method] ) { return methods[ method ].apply( this,

ichat在线客服jQuery插件(可能是历史上最灵活的)

ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ichat追求简单实用,走小清新路线,以便能够适应大多数网站风格. ichat几乎全部由配置生成,使用简便,不需要写html,但需要写js,因为配置是json对象. ichat体积小巧,代码高效,兼容性良好,采用jQuery插件封装,与原有系统零冲突. 效果预览图: 更多内容参见: ichat项目

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种