<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:430px;
height:430px;
margin:100px;
margin-left:17%;
position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#move{
background-color:green;
width:220px;
height:220px;
position:absolute;
left:0px;
top:0px;
display:none;//先让他隐藏，用js使其显示
}
#bimg{
width:430px;
height:430px;
overflow:hidden;
position:absolute;
top:0px;
left:450px;
display:none;//先让他隐藏，用js使其显示
}
#bimg img{
width:800px;
height:800px;
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body onload="bigimg()">
<div id="box">
<img src="img/4.jpg" alt="#">
<div id="move"></div>
<div id="bimg">
<img id="b_bimg" src="img/4.jpg" alt="#">
</div>
</div>
<script>
function bigimg(){
var bbox = document.getElementById("box");
var bmove = document.getElementById("move");
var bbimg = document.getElementById("bimg");
var b_bimg = document.getElementById("b_bimg");
bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
bbimg.style.display = "block";
bmove.style.display="block";
}
bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
bbimg.style.display = "none";
bmove.style.display="none";
}
bbox.onmousemove = function(e){//获取鼠标位置
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;
if(_top<=0)//滑到box的最顶部
_top = 0;
else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
_top = bbox.offsetHeight-bmove.offsetHeight ;
if(_left<=0)//滑到box的最左边
_left=0;
else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
_left=bbox.offsetWidth-bmove.offsetWidth ;
bmove.style.top = _top +"px";//设置move的位置
bmove.style.left = _left + "px";
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
b_bimg.style.left = -b_bimg_left + "px";
}

}
</script>
</body>
</html>

黑色箭头：

1
2
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

红色箭头：

1
2
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

橙色箭头：

1
2
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围：

1
bbox.offsetWidth-bmove.offsetWidth

move块现在的坐标占可移动范围的比例：

1
2
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围：

1
b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置：

1
2
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

js实现放大镜的效果的更多相关文章

  1. 用JS实线放大镜的效果

    今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...

  2. 用js实现放大镜的效果

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...

  3. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  4. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  8. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  9. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. 在vue项目中使用swiper2.7.6

    $ npm install swiper@2.7.6 --save-dev npm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (thi ...

  2. git 忽略某些文件的命令

    正常的,我们在提交项目版本的时候,经常会存在一些需要忽略的文件或者文件夹,那这个时候,我们就可以通过git的一些操作命令来实现! vim .gitignore 通过上面一句话进入编辑忽略文件/文件夹的 ...

  3. 7.xamarin.android 发布签名与控制apk大小

    概述 做了xamarin android 后大家想打包一个apk,发布给其他人使用本章我们将带领大家如何打包签名一个apk. 打包 对于VS2017 或者是VS MAC来说打包一个APK非常简单. 首 ...

  4. django框架--路由系统

    目录 一.路由系统理解 二.路由系统功能划分 三.路由表创建 创建工具 二级路由 路由别名 动态路由及重定向 四.自定义错误页面 五.图示路由系统在框架中的定位 六.路由系统的进阶想法 一.路由系统理 ...

  5. 二、源代码=>程序集及程序集概念介绍

    文本脉络图如下: 一.源代码-面向CLR的编译器-托管模块-(元数据&IL代码)中介绍了编译器将源文件编译成托管模块(中间语言和元数据),本文主要介绍如何将托管模块合并成程序集. 1.程序集的 ...

  6. js操作符类型转换

    乘法 我们来看下前面的题目: console.dir(5*"5"); console.dir(5*"a");//NaN console.dir(5*NaN);/ ...

  7. win7、8上走网络打印机(需找驱动包，不能自动)

    不多说,直接上干货! 简而言之,就是, 第一步是,将电脑与打印机联上网,进行匹配,即连上网可以查找到打印机的型号. 第二步是,安装驱动. D:\Driver\HP LJP2015 PCL6(注意,这个 ...

  8. vue-resource使用笔记

    基本语法 //基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue ...

  9. 在 Ubuntu下安装 labelImg (标数据用)

    安装 SIP 下载 SIP 并解压 : $ sudo python configure.py $ make $ sudo make install 安装 依赖库 $  sudo apt-get ins ...

  10. jieba分词加入特殊字符和空格

    将原始jieba字典中的空格更改为 @@ 1.原来:雅不可攀 3 nr 2.现在:雅不可攀@@3@@nr 将自定义用户词典加入的词与词性中间的空格更改为@@ 1.原来:牵连关系 50 n 2.现在:牵 ...