js实现放大镜的效果
<!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实现放大镜的效果的更多相关文章
- 用JS实线放大镜的效果
今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...
- 用js实现放大镜的效果
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- JS 图片放大镜
今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- 面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
随机推荐
- Swift 里字符串（三）small String
 small string, 只有两个 UInt64 的字,这里面存储了所有的信息. 内存布局如下:  第二个 UInt64 存储了标记位和长度信息,以及部分字符串的值 // Get an int ...
- FineReport9.0定义数据连接（创建与SQL Server 2016数据库的连接）
1.下载并安装好FineReport9.0和SQL Server 2016 2.开始——>所有应用——>Microsoft SQL Server 2016——>SQL Server ...
- 【pkuwc2018】 【loj2537】 Minmax DP+线段树合并
今年年初的时候参加了PKUWC,结果当时这一题想了快$2h$都没有想出来.... 哇我太菜啦.... 昨天突然去搜了下哪里有题,发现$loj$上有于是就去做了下. 结果第一题我5分钟就把所有细节都想好 ...
- WebDriverAPI（8）
判断页面元素是否存在 测试网址 http://www.baidu.com Java语言版本API实例 @Test public void testIsElementPresent(){ driver. ...
- Java之集合(十七)ConcurrentLinkedQueue
转载请注明源出处:http://www.cnblogs.com/lighten/p/7491057.html 1.前言 ConcurrentLinkedQueue是一个无界的线程安全队列,遵循FIFO ...
- Java之集合(十三)WeakHashMap
转载请注明源出处:http://www.cnblogs.com/lighten/p/7423818.html 1.前言 本章介绍一下WeakHashMap,这个类也很重要.要想明白此类的作用,先要明白 ...
- javascript对象属性的命名规则
JS标识符的命名规则,即变量的命名规则: 标识符只能由字母.数字.下划线和‘$’组成 数字不可以作为标识符的首字符 对象属性的命名规则 通过[]操作符为对象添加属性时,属性名称可以是任何字符串(包括只 ...
- 数据库学习---SQL基础(二)
数据库学习---SQL基础(一) 数据库学习---SQL基础(二) 数据库学习---SQL基础(三) 上篇复习的sql的增删改查,and ,or ,>=, <=,!=等逻辑运算符,还有in ...
- springboot-23-aspectj日志记录及threadlocal内存泄漏
对于请求参数的处理和响应, 如果在代码中体现日志会显得很繁琐, 普遍的解决方案是使用spring的切面方案去解决. 这儿使用的是springboot的切面: http://www.cnblogs.co ...
- apache的rewrite规则来实现URL末尾是否带斜杠
1.url: http://www.test.com/user/ 跟:http://www.test.com/user 这两个URL对于用户来说应该是一样的,但从编程的角度来说,它们可以不相同 但我们 ...