今天学习一下，图片放大镜功能，需要使用插件JQzoom

引入文件

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.jqzoom.js"></script>

<!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->

<link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>

js方法

<script>

    $(function(){

        $(".jqzoom").jqueryzoom({

            xzoom: 300, //放大图片的宽度(默认值200)

            yzoom: 300, //放大图片的高度度(默认值200)

            offset: 10, //放大图片的偏移值(度(默认值10)

            position: "right" //放大图片的显示位置度(默认值“right”)

       });

    })

</script>

html页面

<div>

    <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>

    <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>

</div>

整体demo例子

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Jqzoom的使用（图片放大镜）</title>

</head>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.jqzoom.js"></script>

<!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->

<link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>

<script>

    $(function(){

        $(".jqzoom").jqueryzoom({

            xzoom: 300, //放大图片的宽度(默认值200)

            yzoom: 300, //放大图片的高度度(默认值200)

            offset: 10, //放大图片的偏移值(度(默认值10)

            position: "right" //放大图片的显示位置度(默认值“right”)

       });

    })

</script>

<body>

<!-- 使用样式文件（style.csc）,下面注释标签比较完善 -->

<!-- <div id="wrapper">

    <div id="maincontent">

        <p>

            <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>

            <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>

        </p>

    </div>

</div>-->

<div>

    <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>

    <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>

</div>

</body>

</html>

demo例子效果图

demo下载地址：https://pan.baidu.com/s/1jfBjFvLFwQcm01Bf8rpw6w

Jquery的jqzoom插件的使用（图片放大镜）的更多相关文章

  1. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  2. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  3. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  4. jqzoom基于jQuery的图片放大镜

    1.引入jQuery和jqzoom插件 <script src="/js/common/jquery-1.6.2.js" type="text/javascript ...

  5. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  6. jQuery常用特效插件汇总

    jquery的CDN引用及下载地址 http://www.bootcdn.cn/jquery/   1:semantictabs.js可以简单地制作Tabs菜单2:tabBox.js可以非常简单方便地 ...

  7. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  8. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  9. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

随机推荐

  1. Java 中常见的各种排序算法汇总

    首先,Java中自已是有排序的 说明:(1)Arrays类中的sort()使用的是“经过调优的快速排序法”;(2)比如int[],double[],char[]等基数据类型的数组,Arrays类之只是 ...

  2. 力扣（LeetCode）976. 三角形的最大周长

    给定由一些正数(代表长度)组成的数组 A,返回由其中三个长度组成的.面积不为零的三角形的最大周长. 如果不能形成任何面积不为零的三角形,返回 0. 示例 1: 输入:[2,1,2] 输出:5 示例 2 ...

  3. leecode第二题（两数相加）

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  4. 学习笔记19—dpabi错误集

    1.回归斜边量的时候千万不要用红色标记的地方,而要用紫色标记的地方

  5. https 学习笔记

    参考 : http://www.cnblogs.com/JimmyZhang/archive/2008/10/02/Cryptograph.html https://blog.csdn.net/Jog ...

  6. js插件---iCheck是用来做什么的

    js插件---iCheck是用来做什么的 一.总结 一句话总结:25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 定制复选框 定制单选按钮 1.iCheck常用的 ...

  7. 数据结构（C语言版）-第1章 绪论

  8. 协方差分析 | ANCOVA (Analysis of Covariance)

    If you are worried about leaving out covariates you could regress out them first and analyse the res ...

  9. English trip V1 - 19.Where Am I？ 我在哪里？Teacher:Patrick Key:Ask for and directions

    In this  lesson you will learn to ask for and give directions. 本节课你将学习到学会问路和指路. 课上内容(Lesson) 人类的几种感: ...

  10. 《完美应用ubuntu》之全面管理ubuntu软件源

    2.全面管理ubuntu软件包 2.1 DEB软件包之间的基本关系: (1)软件仓库:由ubuntu软件包的维护者维护并公开发布的DEB软件包的集合:可位于网络,服务器,硬盘等各种存储介质. (2)软 ...