先看效果吧,在线地址:图片放大镜
一、首先是 html 结构
下面一步步来,有点耐心就 OK 了
2、获取当前的鼠标位置,并通过计算移动块与鼠标的位置比例,来得到大图片与大图片框框的比例,从而得到大图片的位置,实现放大
1、当鼠标移入大盒子 box 时,显示隐藏的移动块 move 和大图片框 bigimg(大图片框里面包含着大图片 bbbimg)
整体思路:
html 代码效果预览
- <div id="box">
- <img src="images/small.jpg" alt="">
- <div id="move">
- </div>
- <div id="bigimg">
- <img id="bbbimg" src="images/big.jpg" alt="">
- </div>
- </div>
二、CSS 结构,也很简单,具体要注意的写在注释里面了
小弟 3:放大后的图片的活动范围(一个框框),叫它 bigimg,这位小弟 3 也罩着一位小弟 bbbimg,这位最小的小弟才是真正放大后的图片
小弟 2:移动的小灰块,叫它 move,它来控制显示放大哪块(我做了一张半透明的图片作为它的背景)
小弟 1:原图片
一个 box 大盒子,罩着下面的三个小弟
很简单的结构,
css 代码效果预览
- #box {
- width: 310px;
- height: 310px;
- margin: 50px;
- position: relative;
- /* //方便其他的元素依靠它进行绝对定位 */
- }#move {
- background: url(images / move.png);
- width: 100px;
- height: 100px;
- position: absolute;
- left: 0;
- top: 0;
- display: none;
- /* //先隐藏起来 */
- }#bigimg {
- width: 500px;
- height: 500px;
- position: absolute;
- top: 0;
- left: 350px;
- /* //定位在原图右边 */
- display: none;
- /* //先隐藏起来 */
- overflow: hidden;
- /* //超出的部分要隐藏起来 */
- }#bigimg img {
- width: 800px;
- /* //多大都没关系,反正会被隐藏起来的 */
- height: 800px;
- position: absolute;
- /* //这个定位是相对于bigimg这个盒子定位 */
- top: 0;
- left: 0;
- }
先上代码,看不懂代码再继续往下看
三、JS 交互事件
javascript 代码效果预览
- (function () {
- var box = document.getElementById("box");
- var move = document.getElementById("move");
- var bigimg = document.getElementById("bigimg");
- var bbbimg= document.getElementById("bbbimg");
- box.onmouseover = function () {
- // 鼠标移入时,显示选框和大图
- move.style.display = "block";
- bigimg.style.display = "block";
- move.style.cursor = "pointer";
- bigimg.style.cursor = "pointer";
- };
- box.onmouseout = function () {
- // 鼠标移出时,隐藏选框和大图
- move.style.display = "none";
- bigimg.style.display = "none";
- };
- // 获取位置
- box.onmousemove = function (e) {
- // 鼠标当前位置相对于视口的距离
- var x = e.clientX || e.pageX;
- var y = e.clientY || e.pageY;
- // box盒子相对于视口的位置
- var t = box.offsetTop;
- var l = box.offsetLeft;
- // 计算移动块move的位置(当前鼠标位置是move块的中心)
- var _left = x - l - move.offsetWidth/2;
- var _top = y - t - move.offsetHeight/2;
- if (_top <= 0) {
- _top = 0;
- }else if(_top >= box.offsetHeight - move.offsetHeight){
- _top = box.offsetHeight - move.offsetHeight;
- }
- if (_left <= 0) {
- _left =0;
- }else if(_left >= box.offsetWidth - move.offsetWidth){
- _left = box.offsetWidth - move.offsetWidth;
- }
- move.style.top = _top + "px";
- move.style.left = _left + "px";
- //计算移动比例
- var w = _left/(box.offsetWidth - move.offsetWidth);
- var h = _top/(box.offsetHeight - move.offsetHeight);
- // 根据比例计算并设置大图在对应位置的位置
- var bleft = (bbbimg.offsetWidth - bigimg.offsetWidth)*w;
- var btop = (bbbimg.offsetHeight - bigimg.offsetHeight)*h;
- bbbimg.style.left = -bleft + "px";
- bbbimg.style.top = -btop + "px";
- };
- })();
1、首先获取各个元素,这里都看不懂的就不用往下看了
javascript 代码效果预览
- var box = document.getElementById("box");
- var move = document.getElementById("move");
- var bigimg = document.getElementById("bigimg");
- var bbbimg= document.getElementById("bbbimg");
2、鼠标移入移出时,显示与隐藏 move 块和大图片框
javascript 代码效果预览
- box.onmouseover = function () {
- // 鼠标移入时,显示选框和大图
- move.style.display = "block";
- bigimg.style.display = "block";
- move.style.cursor = "pointer";
- bigimg.style.cursor = "pointer";
- };
- box.onmouseout = function () {
- // 鼠标移出时,隐藏选框和大图
- move.style.display = "none";
- bigimg.style.display = "none";
- };
3、重点来了,获取位置,先看一张图,你就会轻易知道 e.clientX、offsetTop、offsetWidth 的区别了
javascript 代码效果预览
- // 鼠标当前位置相对于视口的距离
- var x = e.clientX || e.pageX;
- var y = e.clientY || e.pageY;
- // box盒子相对于视口的位置
- var t = box.offsetTop;
- var l = box.offsetLeft;
然后开始计算 move 移动块相对于盒子的距离,两个 if 条件算出的是它的最大和最小值
javascript 代码效果预览
- 当前鼠标位置是move块的中心)
- var _left = x - l - move.offsetWidth/2;
- var _top = y - t - move.offsetHeight/2;
- if (_top <= 0) {
- _top = 0;
- }else if(_top >= box.offsetHeight - move.offsetHeight){
- _top = box.offsetHeight - move.offsetHeight;
- }
- if (_left <= 0) {
- _left =0;
- }else if(_left >= box.offsetWidth - move.offsetWidth){
- _left = box.offsetWidth - move.offsetWidth;
- }
- move.style.top = _top + "px";
- move.style.left = _left + "px";
接下来就开始算比例了,用 move 移动块移动的距离 /(盒子的宽度 - 移动块的宽度)
javascript 代码效果预览
- //计算移动比例
- var w = _left/(box.offsetWidth - move.offsetWidth);
- var h = _top/(box.offsetHeight - move.offsetHeight);
然后根据比例计算并设置大图在对应位置的位置,最后要加上 - 号,
javascript 代码效果预览
- var bleft = (bbbimg.offsetWidth - bigimg.offsetWidth)*w;
- var btop = (bbbimg.offsetHeight - bigimg.offsetHeight)*h;
- bbbimg.style.left = -bleft + "px";
- bbbimg.style.top = -btop + "px";
来源: http://www.w3cfuns.com/notes/43245/8f1065d27f307a924f367cbcce0e092d.html