今天学习一下，图片放大镜功能，需要使用插件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. App.Config自定义配置节点

    配置文件: <?xml version="1.0" encoding="utf-8"?> <configuration> <con ...

  2. 深入JVM对象引用

    在jdk 1.2以前,创建的对象只有处在可触及(reachaable)状态下,才能被程序所以使用,垃圾回收器一旦发现无用对象,便会对其进行回收.但是,在某些情况下,我们希望有些对象不需要立刻回收或者说 ...

  3. python模块（3）

    1.xml:实现不同语言或程序之间进行数据交换的协议 <data> <country name="Liechtenstein"> <rank upda ...

  4. 学习笔记16—Matlab 基础集

    1.常用相关 [r, p] = corr(X,Y), [r, p] = partialcorr(X,Y, Z) , 其中Z是协变量. 2.TD_age = importdata('F:\BrainAg ...

  5. Python全栈开发-执行字符串形式的语句和字符串形式的表达式方法(即exec和eval方法)

    Python有时需要动态的创造Python代码,然后将其作为语句执行  或  作为表达式计算. exec用于执行存储在字符串中的Python代码.   1. 语句与表达式的区别:表达式是 某事,语句是 ...

  6. 利用jenkins+git自动执行接口测试代码

    事前准备 部署好jenkins.申请一个码云账号.代码同步至码云 1.在码云上新建一个项目,并把代码同步上去 我设置成了私有项目 2.为项目添加部署公钥 因为是私有项目,所以需要添加一个部署公钥,不然 ...

  7. 嵌入式Servlet容器自动配置和启动原理

    EmbeddedServletContainerAutoConfiguration:嵌入式的Servlet容器自动配置? @AutoConfigureOrder(Ordered.HIGHEST_PRE ...

  8. GenomicConsensus (quiver, arrow)使用方法 | 序列 consensus

    https://github.com/PacificBiosciences/GenomicConsensus GenomicConsensus 是pacbio开发的,我个人非常不喜欢pacbio开发的 ...

  9. 混合测序(Pooling)

    什么是高通量测序技术中的多重测序? 多重测序是指将带有特殊分子标签(barcode或者index)的不同来源的DNA标本,放入一个反应体系进行测序的方法.与一次检测一种来源的DNA相比,多重检测通过分 ...

  10. python3-知识扩展扫盲易忘-generator的用法

    前部分转自: https://www.cnblogs.com/Tsukasa/p/6613934.html 通过列表list生成器,我们可以直接创建一个列表 ? 1 2 3 >>> ...