Magnifier笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnifier</title>
<!--
20161109学习了一个jq写放大镜的demo。
需要注意的几点：
1、在样式设计上，浮动一定是所有的同级元素，比如下面结构中的span按钮和中间的包裹图片的div盒子，一开始，我只给按钮加了浮动，忘了中间包裹图片的div，结果，你们知道的哈，我调试了半个小时……
2、还有一点是非常需要注意的，那就是下面的图片大图显示区还有获取局部图片的盒子以及最终效果的放大镜，说白了，就是三个盒子，他们的宽高必须是倍数的关系，不然最后你的放大镜会出现放大偏移的bug。
3、没了，暂时就是这些，视频教学里，只是把代码复制了一遍，也没教这些实现的原理是怎样的，蛋疼的我，研究了一下午，得出以下代码注释结论，如果你发现了错误，请来跟我交流哦。
-->
<style>
/*公共样式：略*/
*{margin: 0;padding: 0;list-style: none;} /*zoom：最外面的盒子，及父盒子，可以有可以没有*/
.zoom{width: 800px;height: 700px;position: relative;margin: auto;}
/*zoomMin:这个命名其实给错了，不想改了，他的意思是大图展示区*/
.zoomMin{position: relative;width: 380px;height:380px;border: 1px solid indianred;margin-bottom: 3px; }
.zoomMin img{width: 100%;height: 380px;}
/*大图展示区里的取图片局部的“放大镜”*/
.zoomMin .mask{width: 126px;height: 126px;background: red;opacity: 0.5;position: absolute;left: 0;top:0;display: none;} /*zoomSmall：存放所有小图的盒子*/
.zoomSmall{width: 380px}
/*里面还包含两个按钮*/
.zoomSmall span{cursor: pointer;float: left;width: 10px;height:60px;line-height: 60px;border-radius: 2px;background: #82878c; } /*wrapSallImg：它被包含在zoomSmall里，是具体的备选小图的集合容器*/
.wrapSallImg{width: 359px;overflow: hidden;margin-right:1px;float: left;/*因为两个按钮和他是同级别的，所以也要给浮动。*/}
.wrapSallImg ul{width:1450px;position: relative;/*这里最好是给这个relative相对定位，他表示被定位，但是还占位，使用absolute后，你可以试试……*/}
/*清浮动：略*/
.wrapSallImg ul:after{content: "";display: block;clear: both;}
.wrapSallImg ul li{cursor: pointer;float: left;width: 68px;height: 60px;border: 1px solid #ccc;margin: 0 1px; _display: inline;/*兼容ie6的margin问题*/}
.wrapSallImg>ul>li img{width: 100%;height: 60px;}
.wrapSallImg ul .action{border: 1px solid red; } /*zoom_arge：最终的放大镜就是这个了*/
.zoom_arge{width: 250px;height: 250px; border: 1px solid saddlebrown;position: absolute;top:0;
right:0;overflow: hidden;display: none;}
.zoom_arge img{height: 760px; width: 760px;position: absolute;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="zoom">
<div class="zoomMin">
<img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt="">
<div class="mask"></div>
</div>
<div class="zoomSmall">
<span class="leftBtn"><</span>
<div class="wrapSallImg">
<ul>
<li class="action"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102539zuxem000ump9z11m.jpg.thumb.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/10293325N-0.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/1029331950-4.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
</ul>
</div>
<span class="rightBtn">></span>
</div>
<div class="zoom_arge"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></div>
</div>
<input type="text" woshizidingyishuxing="用来测试你的各种运行值对不对的一个框">
</body>
<script>
var oZoomMin=$(".zoomMin");
var oZoomMinImg=$(".zoomMin img");
var aSmallImgUl=$(".wrapSallImg ul");
var aSmallImgLi=$(".wrapSallImg ul li");
var aSmallImLiWidth=aSmallImgLi.outerWidth(true);//true：这样就把元素的边框和margin或padding值都计算进来了。
var aSmallImgLiImgs=$(".wrapSallImg ul li img");
var oLbtn=$(".leftBtn");
var oRbtn=$(".rightBtn");
var now=0;/*计数器：等价于自定义的循环参数 i 一样的道理*/
$(function () {
aSmallImgLi.on("mouseover",function () {
$(this).addClass("action").siblings().removeClass("action");
/*1.aSmallImgLi：所有小图集合；
* 2.添加鼠标移入事件mouseover
* 3.$(this)：等于是jq自动帮你循环遍历了这个集合，而$(this)就是指当前被鼠标移入的小图。
* 4.执行结果：给当前触发事件的元素添加一个class类名叫action，其他的兄弟们删掉这个class类名。
* */
});
aSmallImgLiImgs.on("click",function () {
var aSmallImgLiImgSrc= $(this).attr("src");
oZoomMinImg.prop("src",aSmallImgLiImgSrc);
$(".zoom_arge img").prop("src",aSmallImgLiImgSrc);
/*1.上面是鼠标移入事件，那这个就时点击事件，我叫他确认事件。选半天了，总得确认一个吧。
* 2.有所不同的是上面的是给li加的class，而这个是给包含在li里面的img做的事件哦
* 3.执行结果：当你点击小图片后，会通过prop（）方法把你的attr属性的值得到，然后赋给大图展示区和放大镜的最终盒子，前提是他们里面都要包含一个img来接收这个地址。
* 4.值得一提的是：attr（）和prop（）方法功能是一样的，都是获取元素的属性的，这里的属性不是指css样式啊，这个不要搞混同学，css样式要用css（）获取。那么，老定义了，（“写一个值就是获取”，“写两个值就是改值，并且要用双引号啊，不然就是变量了”）
* 好，基本功能是一样的，但是，切记，这是最容易被忽略的芝士：attr可以获取你自己定义的属性，而prop只能是获取到元素本身就有的属性。自定义属性：比如你这样写<input type='text' value='123' papapa='red'>
* 那么，这个input里的papapa=‘red’就是你自定义的属性。一样，通过arrt（）方法，你也可以动态的给元素添加自定义属性
**/
});
oLbtn.on("click",function () { if (now==0){
now=0;
}else {
now--;
aSmallImgUl.animate({"left":"+="+aSmallImLiWidth},500);
}
/*1.我的天啊，这里是我一开始最头痛的地方，这到底是为了什么，难死爸爸了。不过认真的分析后，嗨，太简单了。
* 2.事件：左按钮被点击了。
* 3.然后进入判断
* 4.我们的计数器now初始化值就是0，所以第一个条件成立，如果这时候你点击左按钮，他会不鸟你，原因就在于，人家在第一次判断中胜利了。这也是我们想要的结果，如果还不太明白，你可以把else里的语句拿到if判断外面点击一下左按钮，就会幡然醒悟。
* 5.其实关键的在于计数器now--：在事件外面的计数器now初始值是0，那么作为全局变量的它很微妙，在你点击右键的时候，他其实被赋值为+1了，这个其实就相当于我们使用的for循环，这个计数器就相当于 i ,这也是js的一个非常方便的机制，全局变量可以共享函数里的值，甚至被传入其他函数中。
* 6.那么当我们通过点击右键给计数器赋值成为1后，那么你再点击左按钮，哎？对了，第一个判断语句不会生效了，那么好的，执行else语句吧。这里计数器--，就是now=now-1；这样1-1后又是0了，你再点击，好的，第一天判断生效，就不给你执行下面的语句了。这，就是实现思路。
* 7.关于“+=”，看过相关教程的应该都知道，就是让值累加，这样才能实现点一个走一个，不然，只会原地踏步。
* */
});
oRbtn.on("click",function () {
if (now==3){
now=3;
}else {
now++;
aSmallImgUl.animate({"left":-now*aSmallImLiWidth},500)
}
/*由上面的逻辑，同样， 你可以推算出这个右按钮的执行逻辑。
* 这个参数3指的是被隐藏的那3个图片的下标
* */
});
oZoomMin.on("mousemove",function (e) {
$(".zoom_arge").show(); //当大图展示区被鼠标移入的时候，我们就让放大镜区显示
var oZoomMinOffset=$(this).offset(); //这里有很多算法，数学不好的我，真是相当的蛋疼啊，不过，我们可以一点一点的推算，这，到底是为了什么？
var X=e.pageX-oZoomMinOffset.left - $(".mask").width()/2;
var Y=e.pageY-oZoomMinOffset.top - $(".mask").height()/2;
/*1.首先是获取：声明一个变量来接收大图展示区$(this)的offset（）方法。这个方法里装着两个值offset().left和offset().top;
* 简单解释一下这是什么值哈：就是距离文档的位置，譬如：div在body里，那么他的文档距离就是他自己的margin或者padding，如果div里有一个p表情，那他的距离就是距离的div的，跟body甚至document都没有关系了。
* 2.ok，获取了之后呢就要赋值了，首先，我们要获取到鼠标移动的坐标，函数（e）,然后e.pageX,不清楚的百度哈，这个很简单了，就是鼠标的值，然后
* 这个值要进过一系列的计算，按照运算规则，应该是先计算最后面那个除以2，好，我们就先来看这个除以2.
* a.$(".mask")是我们局部图片的拾取器，他的宽除以2还剩下一半的宽，我们只需要记住，这样写，是为了，让鼠标移动到拾取器盒子的中间才会开始带着拾取器去“漫游”，你可以先把我这除以二去掉看看执行结果。
* b.那么剩下的就是大图展示区距离文档的距离 - 去了还剩一半尺寸的拾取器，最后他们两剪完的数值还被鼠标的数值给减去了，好吧，我都不想写注释了，但，做人就要做到底。
* c.鼠标距离是指在当前这个元素的整个尺寸上，我们鼠标所在的坐标位置，它同样具备横向和纵向，他的left就是X，top就是Y，那么他减去当前元素距离文档的距离得出的是这个鼠标所在的真实位置；
* d.这样说你可能不明白，你可以做一个例子，如果，你的这个div就是贴在左上角的，没有margin和padding，手欠的你还写了*{margin:0;padding:0};那么offset()这个值就可以不用写了，不信，你可以试试，在这种情况下
* 你把offset()去掉，当然也就不用减去oZoomMinOffset.left了，这时候，你会发现，我擦，居然也可以啊。但是，记住，但是，如果你给div，这div就是指最外面那个大盒子了，如果你给他了margin或者padding，嘿嘿，自己体验吧。
* */
if (X<=0){
X=0;
}else if (X>=oZoomMin.width()-$(".mask").width()){
X=oZoomMin.width()-$(".mask").width()
}
if (Y<=0){
Y=0;
}else if (Y>=oZoomMin.height()-$(".mask").height()){
Y=oZoomMin.height()-$(".mask").height()
}
/*1.判断条件一的功能是让我们的拾取器不会超过父盒子可视区；
* 2.首先还是判断，如果X的值等于0，那好我们就让她等于0；下面的不执行
* 3.如果不等于0；那么看看是是不是大于或者等于这个值呢？
* 4.重点来了，这个值是干嘛的，首先：oZoomMin我们的大图展示区，他的宽减去拾取器的宽，还减去他的高度，就等于是在他身上挖去一块拾取器大小的尺寸。
* 5.这个尺寸干嘛用啊？看下面；
* /
/*比例尺*/
var percentageX=X/(oZoomMin.width()-$(".mask").width());
var percentageY=Y/(oZoomMin.height()-$(".mask").height());
/*这个东西叫比例尺
* 它是什么呢他就是经过上面判断出来的那剩下的一大块尺寸然后呢除以了大图展示区减去拾取器的尺寸，哎？这不就是自己除以自己嘛？对啊，1/1=1吧；2/2=1吧，3/3=1吧；
* 比例尺，要的，就是这个1等1的比例如果你像把比例放大，即做到放大更多倍数的话，就把比例加大就好了，当然，那样会显示的很怪异，建议不要做。
* */
$("input").val(percentageX+"and"+percentageY);//显示我们比例尺的
$(".zoom_arge img").css({
"left":-percentageX*($(".zoom_arge img").width()-$(".zoom_arge").width())+"px",
"top":-percentageY*($(".zoom_arge img").height()-$(".zoom_arge").height())+"px"
});
/*1.最终的这个放大镜展示区，就是用比例尺，当然，是负数的。如果是正数呢，拾取器就只会获取我们的左上角那一块；只需记住，正数显示不对的就给个负数。
* 2.我们放大镜展示区里的图的尺寸是它父亲的3倍多一点，这个尺寸是有一定规律的，好好想想，必须是倍数，不然我们最终的显示就会变形。
* 3.大图宽度减去放大镜盒子宽度被鼠标控制的比例尺乘，会是什么结果呢，被放大了呗。并且是按比例放大的。其实，这里的减法，我不是很明白，如果换我写，我想不明白为什么要这样。。。。
* 反正，最后就是我们放大镜里的大图展示的定位坐标，是通过这么一系列蛋疼的算法得出来的。
* 用jq写已经是超级省代码了，原生的，你就哭吧。
* */
$(".mask").show().css({ //同样的还有我们用来获取局部图片的放大镜拾取器吧，这样叫吧，想不出别的名字了。
"left":X+"px", //这里的X和Y ，如果你觉得被上面一系列算法污染了，可以拿到最顶部，一样可以执行，不会被影响。
"top":Y+"px"
});
});
oZoomMin.on('mouseout',function () {
/*这里就是尾声了，很简单，鼠标移出，消失不见*/
$(".mask").hide();
$(".zoom_arge").hide();
}); /* var arr=[
oZoomMinImg=null,
aSmallImgLi=null,
aSmallImgLiImgs=null
]; */ //用完之后集体销毁，不再占用内存。 });
/*稍加修改，把他变成自己的插件吧。*/ </script>
</html>
Magnifier笔记的更多相关文章
- git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
- springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
- 读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
随机推荐
- LeetCode Coin Change
原题链接在这里:https://leetcode.com/problems/coin-change/ 题目: You are given coins of different denomination ...
- Python开发【第十章】：I/O多路复用、异步I/O(综合篇)
近期心得:国庆节放假再加上近期工作太忙,已经有半个月没更新博客了,程序更别说了,也没怎么去写,自己给自己着实放了个大假.谈谈感受的话,没有python的日子,每天看书.看电影.各种玩,还有爸妈伺候着, ...
- Oracle 索引创建、表分区
--EAF_WORKFLOWSTEP 表创建 CREATE TABLE EAF_WORKFLOWSTEP ( ) NOT NULL PRIMARY KEY USING INDEX TABLESPACE ...
- isKindOfClass和isMemberOfClass的区别
isKindOfClass和isMemberOfClass的区别 isKindOfClass和isMemberOfClass 都是NSObject的比较Class的方法 但两个有很大区别: isKin ...
- jira任务批量操作示例
1. 获取jira任务编号 使用字段提取工具获取编号,如WQBNEWSDLDL-347,WQBNEWSDLDL-348: 字段提取正则表达式:(?<2>[\[[](?<1>[A ...
- Java jdbc 连接oracle之三（封装工具类）
driver = oracle.jdbc.driver.OracleDriver url = jdbc:oracle:thin:@192.168.10.105:1521:orcl user = LF ...
- Programming paradigms
https://en.wikipedia.org/wiki/Aspect-oriented_programming Action Agent-oriented Array-oriented Autom ...
- 原生js拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- LUA学习笔记三·时间等操作系统库
1.构造时间 2.时间制定格式输出 3.计时器(闭包)os.difftime (t2, t1) 返回以秒计算的时刻 t1 到 t2 的差值. (这里的时刻是由 os.time 返回的值). 在 POS ...
- Oracle 正则表达式函数-REGEXP_SUBSTR 使用例子
原文在这 戳 REGEXP_SUBSTR 5个参数 第一个是输入的字符串 第二个是正则表达式 第三个是标识从第几个字符开始正则表达式匹配.(默认为1) 第四个是标识第几个匹配组.(默认为1) 第五个是 ...