更多java图片放大镜视频课程学习地址：https://ke.qq.com/course/149432
- 第一章：放大镜效果的演示
1. 概述
在一些电商的网站中，查看商品详细信息时，用户想更详细的观看商品的图片，有一个观看图片比较好看的效果就是放大镜效果，这种效果现在是非常常见的效果。
例如京东商城网站，查看详细页面，观看图片就有这种效果。
在我们拓薪教育课程中，乐观商城中大量使用了这种效果。所以今天和大家来分享一下这种技术。
JQuery中的jqzoom插件就可以完成这种效果，下面咱们就开始学习jqzoom插件技术。
2.第二章：前端知识的介绍
2.1 前端技术的介绍
html：超文本标记语言，网页组成的最基本的语言。
css：层叠样式表，用来给网站设置好看的样式的。
JavaScript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。简称js。
JQuery：jQuery是一个快速、简洁的JavaScript框架或者类库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
3.第三章：jqzoom插件的使用
3.1jqzoom.js插件的介绍
jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大，使用简便。支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果。
3.2jqzoom.js插件的使用
先下载jqzoom.js相关的文件，老师今天提供的资料中已经下载完成，直接使用即可。
使用的jqzoom.js的开发步骤：
引入jqzoom.css文件
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">引入jquery.js文件
<script type="text/javascript" src="js/jquery.js"></script>引入jquery.jqzoom.js文件
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>先准备一大一下2张一样图片，在html页面中定义div，使用img标签引入2张图片。
<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="放大镜效果" jqimg="images/shoe4_big.jpg"></div>使用jqzoom.js中提供对象完成放大镜效果。
<script>
// 页面加载
$(function(){
// 使用jqzoom的插件初始化
$(".jqzoom").jqueryzoom();
});
</script>具体的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css-->
<link type="text/css" href="css/jqzoom.css" rel="stylesheet">
<!--引入js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script>
// 页面加载
$(function(){
// 使用jqzoom的插件初始化
$(".jqzoom").jqueryzoom();
});
</script>
</head>
<body>
<!--定义div容器，里面存放要显示的图片-->
<div class="jqzoom">
<!--图片标签-->
<img src="images/shoe3_small.jpg" alt="鞋的图片" jqimg="images/shoe4_big.jpg" >
</div>
</body>
</html>3.2jqzoom.js中常用的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css-->
<link type="text/css" href="css/jqzoom.css" rel="stylesheet">
<!--引入js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script>
// 页面加载
$(function(){
// 使用jqzoom的插件初始化
$(".jqzoom").jqueryzoom({
// 放大镜的宽度
xzoom:300,
// 放大镜的高度
yzoom:300,
// 大图片显示的位置
position:"right",
// 显示的大图片距离小图片的距离
offset:100,
});
});
</script>
</head>
<body>
<!--定义div容器，里面存放要显示的图片-->
<div class="jqzoom" style="position: absolute;top:300px;left: 300px">
<!--图片标签-->
<img src="images/shoe3_small.jpg" alt="鞋的图片" jqimg="images/shoe4_big.jpg" >
</div>
</body>
</html>根据本人多年从业以及学习经验，录制了一套最新的Java精讲视频教程，如果你现在也在学习Java，在入门学习Java的过程当中缺乏系统的学习教程，你可以加群654631948领取下学习资料，面试题，开发工具等，群里有资深java老师做答疑，每天也会有基础部分及架构的直播课，也可以加我的微信renlliang2013做深入沟通，只要是真心想学习Java的人都欢迎。
java基础教程：https://ke.qq.com/course/149432?tuin=57912c43
Java分布式互联网架构/微服务/高性能/springboot/springcloud：
https://ke.qq.com/course/179440?tuin=57912c43
