今天学习一下，图片放大镜功能，需要使用插件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. [转][C++]佛祖保佑，永无bug。C++ BUG解决方案

    // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0\ = /0 // ___/`---'\___ // .' \\| ...

  2. [jshint] 'import' is only available in ES6 (use 'esversion: 6'). (W119) 提示import等ES6语法的jshint错误的，在代码前加一行 /* jshint esversion: 6 */

    官方下载了vue的简单项目,用vscode打开main.js,代码前出现黄点,js报错了 把鼠标移至import的波浪线上,出现提示:W119 - ‘import’  is only availabl ...

  3. (转)Lua的table库函数insert、remove、concat、sort详细介绍

    原帖链接:http://www.jb51.net/article/64711.htm#comments 有增注标识的地方为额外注释,非原帖内容. 函数列表:(增注:只能用于数组!) table.ins ...

  4. mysql索引优化比普通查询速度快多少

    mysql索引优化比普通查询速度快多少 一.总结 一句话总结:普通查询全表查询,速度较慢,索引优化的话拿空间换时间,一针见血,所以速度要快很多. 索引优化快很多 空间换时间 1.软件层面优化数据库查询 ...

  5. English trip M1 - AC11 May I Help You? 我能帮到你吗？ Teacher:Lamb

    In this lesson you will learn to ask for things in shops  在本课程中,您将学习如何在商店中寻找东西 课上内容(Lesson) How are ...

  6. 3.2 定位shellcode

    前言 此帖为 0day_2th 一书第三章实践不完全记录. 流程记录 searchAddr.c 文件: #include <windows.h> #include <stdio.h& ...

  7. 20171104xlVBA制作联合成绩条

    Dim dGoal As Object Dim dCls As Object Sub 制作联合成绩条() Dim sht As Worksheet Dim HeadRng As Range Dim H ...

  8. 通过.frm和.ibd恢复mysql数据

    .frm文件:保存了每个表的元数据,包括表结构的定义等: .ibd文件:InnoDB引擎开启了独立表空间(my.ini中配置innodb_file_per_table = 1)产生的存放该表的数据和索 ...

  9. 原生JS实现瀑布流布局

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 1.首先瀑布流所有的图片应该保持宽度一致,高 ...

  10. Digital Deletions HDU - 1404

    Digital deletions is a two-player game. The rule of the game is as following. Begin by writing down ...