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

引入文件

  1. <script type="text/javascript" src="js/jquery.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.jqzoom.js"></script>
  3. <!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->
  4. <link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>

js方法

  1. <script>
  2.     $(function(){
  3.         $(".jqzoom").jqueryzoom({
  4.             xzoom: 300, //放大图片的宽度(默认值200)
  5.             yzoom: 300, //放大图片的高度度(默认值200)
  6.             offset: 10, //放大图片的偏移值(度(默认值10)
  7.             position: "right" //放大图片的显示位置度(默认值“right”)
  8.        });
  9.     })
  10. </script>

html页面

  1. <div>
  2.     <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
  3.     <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
  4. </div>

整体demo例子

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Jqzoom的使用（图片放大镜）</title>
  6. </head>
  7. <script type="text/javascript" src="js/jquery.min.js"></script>
  8. <script type="text/javascript" src="js/jquery.jqzoom.js"></script>
  9. <!--<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>-->
  10. <link rel="stylesheet" type="text/css" href="style/jqzoom.css" media="screen"/>
  11.  
  12. <script>
  13.     $(function(){
  14.         $(".jqzoom").jqueryzoom({
  15.             xzoom: 300, //放大图片的宽度(默认值200)
  16.             yzoom: 300, //放大图片的高度度(默认值200)
  17.             offset: 10, //放大图片的偏移值(度(默认值10)
  18.             position: "right" //放大图片的显示位置度(默认值“right”)
  19.        });
  20.     })
  21. </script>
  22.  
  23. <body>
  24. <!-- 使用样式文件（style.csc）,下面注释标签比较完善 -->
  25. <!-- <div id="wrapper">
  26.     <div id="maincontent">
  27.         <p>
  28.             <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
  29.             <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
  30.         </p>
  31.     </div>
  32. </div>-->
  33. <div>
  34.     <div class="jqzoom"><img src="data:images/shoe1_small.jpg"  alt="scarpa" jqimg="images/shoe1_big.jpg"></div>
  35.     <div class="jqzoom"><img src="data:images/shoe3_small.jpg"  alt="scarpa" jqimg="images/shoe3_big.jpg"></div>
  36. </div>
  37. </body>
  38. </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. 四: scrapy爬虫框架

    5.爬虫系列之scrapy框架   一 scrapy框架简介 1 介绍 (1) 什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架 ...

  2. 测试服务器上多个tomcat配置Nginx访问

    user nginx; worker_processes 4; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; wor ...

  3. 【C#】采用OleDB读取Excel文件转DataTable

    using System; using System.Data; using System.Data.OleDb; using System.IO; using System.Linq; using ...

  4. Qt532.QString::split()

    1.效果 和 JS里面 貌似是一样的 1.1.QString 编码转换(https://www.cnblogs.com/CodeSkill/p/5082447.html) 2.代码: void Mai ...

  5. 大话WebRTC的前世今生

    音视频的历史 音视频可以说是人类与生俱来的需求,人一出生就要用耳朵听,用眼睛看.中国的古代神话中为此还专门设置了两位神仙(千里眼和顺风耳),他们可以听到或看到千里之外的声音或景像. 为了解决听的远和看 ...

  6. leecode第十四题（最长公共前缀）

    class Solution { public: string longestCommonPrefix(vector<string>& strs) { string res=&qu ...

  7. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  8. yum的配置文件介绍

    yum 的配置文件分为两部分:main 和repository   main 部分定义了全局配置选项,整个yum 配置文件应该只有一个main.常位于/etc/yum.conf 中. reposito ...

  9. 虚拟机vmnet0、vmnet1和vmnet8的区别

    vmnet0,实际上就是一个虚拟的网桥 vmnet0,实际上就是一个虚拟的网桥,这个网桥有很若干个端口,一个端口用于连接你的Host,一个端口用于连接你的虚拟机,他们的位置是对等的,谁也不是谁的网关. ...

  10. Ubuntu 16 , 从时间服务器更新时间

    因为在公司的内网,所以不能用Ubuntu默认的服务器去更新时间. 只能改成从网关 10.182.202.2 上取时间 1) 如果没有安装ntp 的话,先安装 apt-get install ntp 2 ...