Jquery的jqzoom插件的使用（图片放大镜）

今天学习一下，图片放大镜功能，需要使用插件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插件的使用（图片放大镜）相关推荐

jQuery 人脸识别插件，支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
jquery图片放大镜插件—jqzoom
说明:在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效 ...
介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
jQuery图片放大镜插件
运行效果: 代码编辑: <html lang="zh"> <head><meta charset="UTF-8"><m ...
Jquery图片放大镜效果
介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL,所以找到了这个插件, 插件下载地址: http ...
13款jQuery图片放大镜效果代码
jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...
一款很棒的图片放大镜插件
这是一款轻量级的图片放大镜特效,截图这个效果已经是放大了好多倍数了,大家指定这张图片多大尺寸吗,2800px * 1760px 确实不小哈,大家可以查看演示. 演示地址:jquery可自定义的图片 ...

Jquery的jqzoom插件的使用（图片放大镜）

Jquery的jqzoom插件的使用（图片放大镜）相关推荐

最新文章

热门文章