今天学习一下，图片放大镜功能，需要使用插件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. 安装tensorflow-gpu

    pip install --upgrade tensorflow-gpu import tensorflow as tf sess = tf.Session() 如果提示如下 -- ::] Your ...

  2. vs2015 VS-Visual Studio-IIS Express 支持局域网访问

    使用Visual Studio开发Web网页的时候有这样的情况:想要在调试模式下让局域网的其他设备进行访问,以便进行测试.虽然可以部署到服务器中,但是却无法进行调试,就算是注入进程进行调试也是无法达到 ...

  3. 前端阶段_html部分

    HTML 1.html5的第一行一定是<!DOCTYPE html>,h4太长,而且一般ide中会自动加载,了解即可. 2.h5的整个页面被<html></html> ...

  4. [转]C++中const、volatile、mutable的用法

    原文:https://blog.csdn.net/imJaron/article/details/79657642 const意思是“这个函数不修改对象内部状态”. 为了保证这一点,编译器也会主动替你 ...

  5. gc调优我们到底在调整什么

    java开发一般都会涉及到jvm调优其中gc调优是个重点项.那gc调优调整的究竟是什么呢准确来说是业务.下面围绕这个话题展开 起因 为什么说是业务呢得从cc++开始说起如果说是用c/c++做开发运行的 ...

  6. ImageConverter引起的 invalid address or address of corrupt block 0xb7feab58 passed to dlfree

    虹软人脸识别,其方法要传NV21格式的byte[], github上有一个虹软的Demo,是不是虹软工作人员写的不清楚,这个Demo里bitmap转NV21格式byte[]用的是一个第三方库https ...

  7. jquery将表单序列化json对象

    $.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serializeArray(), func ...

  8. PHP加密函数

    单向散列加密 单向散列加密是指通过对不同输入长度的信息进行散列计算,得到固定长度的输出.这个散列计算是单向的,即不能对固定长度的输出进行计算从而获取输入信息. 特征:雪崩效应.定长输出和不可逆 作用: ...

  9. how-to-view-source-of-chrome-extension

    https://gist.github.com/paulirish/78d6c1406c901be02c2d Option 1: Command-line download extension as ...

  10. Ubuntu16.04安装8821CE 无线网卡无驱动

    已解决 参考链接:https://unix.stackexchange.com/question ... -mint-18-2 内容 Worked solution (Requirements: ke ...