博主送福利了，微信扫码有惊喜。超值红包等着你。。么么哒

言归正转

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" alt="" /></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>

jQuery插件之jqzoom的使用和参数设置的更多相关文章

  1. jQuery插件之jqzoom

    jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...

  2. jQuery插件开发方式

    一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){ $.extend({ fun1: ...

  3. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  4. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  5. 助你简化开发的 jQuery 插件

    Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完 ...

  6. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  7. 写jQuery插件时，一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  8. jQuery插件select2跨域设置xhrFields参数

    ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...

  9. jquery插件cloud-zoom(放大镜)

    效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像 ...

随机推荐

  1. CSU 1258 异或运算的线段树

    题目大意:在给定区间内对每个数的最后一个二进制为1的位将其修改为0,如果数本身已经为0了,就不做改变 输出给定区间的所有数的异或值 #include <cstdio> #include & ...

  2. P1072 Hankson的趣味题

    #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  3. nyoj_10_skiing_201405181748

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当 ...

  4. hdu_1028_Ignatius and the Princess III

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  5. 权限框架之Shiro详解(非原创)

    文章大纲 一.权限框架介绍二.Shiro基础介绍三.Spring Boot整合Shiro代码实战四.项目源码与资料下载五.参考文章   一.权限框架介绍 1. 什么是权限管理   权限管理属于系统安全 ...

  6. Why we have tuple and list in python

    The most notable difference between tuple and list is that tuple is immutable and list is mutable. B ...

  7. cache and database

    This article referenced from http://coolshell.cn/articles/17416.html We all know that high concurren ...

  8. 【转】深入理解javascript作用域——词法作用域和动态作用域

    前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作 ...

  9. Num 15: NYOJ: 题目0002 : 括号配对问题 [ 栈(stack) ]

    原题连接      首先要了解有关栈的一些基本知识,即:      什么是栈,栈有什么作用:        1.什么是栈: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  10. kvc kvo 总结---180313

    textField.placeholder = @"username is in here!"; [textField setValue:[UIColor redColor] fo ...