今天学习一下，图片放大镜功能，需要使用插件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. Spring中JdbcTemplate使用RowMapper

    package com.cxl.demo.dao; import java.sql.ResultSet; import java.sql.SQLException; import java.util. ...

  2. ubuntu14.04 Keras框架搭建

    >>>sudo su >>> pip3 install -U --pre pip setuptools wheel >>> pip3 instal ...

  3. git 放弃本地修改

     本文以转移至本人的个人博客,请多多关注! 如果在修改时发现修改错误,而要放弃本地修改时, 一, 未使用 git add 缓存代码时. 可以使用 git checkout -- filepathnam ...

  4. 算法笔记--字典树（trie 树）&& ac自动机 && 可持久化trie

    字典树 简介:字典树,又称单词查找树,Trie树,是一种树形结构,是哈希树的变种. 优点:利用字符串的公共前缀来减少查询时间,最大限度地减少无谓的字符串比较. 性质:根节点不包含字符,除根节点外每一个 ...

  5. python中configparser模块的使用

    configparser模块用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser. 首先要写一个如下所示的配置文件: [DEFAULT] serv ...

  6. Server SQL Modes

    The MySQL server can operate in different SQL modes, and can apply these modes differently for diffe ...

  7. 《HTTP 权威指南》笔记:第十三章 摘要认证体制

    前言 基本认证存在缺陷,摘要认证为了解决基本认知的一些缺陷,进行了进一步的完善,更加安全. 流程 摘要认证的特点是:永远不会以明文方式在网络上发送密码原理:通过发送一个「指纹」或者「密码的摘要」来验证 ...

  8. 创建.ignore文件

    方法一:1. 在需要创建 .gitignore 文件的文件夹, 右键选择Git Bash 进入命令行,进入项目所在目录.如:(cd /d/git/project) 2. 输入 touch .gitig ...

  9. java ----> 手动编译java项目

    环境: jdk1.8,cmd,notepad++ 创建java工程test,创建文件夹: src classes lib 说明: src 放置.java文件 classes 放置.class文件 li ...

  10. win10+cpu+tensorflow+pycharm

    1.安装64位的python3.5 选择windowsx86-64 executable installer安装 2.安装tensorflow cmd->进入到安装python的Scripts文 ...