用js实现放大镜的效果的简单实例


Posted in Javascript onMay 23, 2016

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固。可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂。。。。)。我相信以后自己也能够写出高大上的东西。加油!

废话说的有点多,说正事。前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的)。由于我还没有好好的学习过JQuery,但是那些基本的代码还是可以看懂的,所以就想拿现在正在学习的js练一下手,最后还是成功的实现了这个效果。

思路:先让move块和bimg块隐藏,当鼠标移动到box上时,使move块和bimg块显示,获取鼠标当前的位置,然后经过计算给与move块和bimg块适当的值实现放大镜效果(move块和bimg块的位置的计算后面有详细介绍)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <link href="css/bigimg.css" rel="stylesheet" />
  <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
  <div id="box">
    <img src="images/simg.jpg" alt="#">
    <div id="move"></div>
    <div id="bimg">
      <img id="b_bimg" src="images/bimg.jpg" alt="#">
    </div>
  </div>
</body>
</html>

css样式:

*{
  margin:0px;
  padding:0px;
}
#box{
  width:430px;
  height:430px;
  margin:100px;
  margin-left:17%;
  position:relative;//这里使用相对定位,好让其他的元素能依靠这个元素定位
}
#move{
  background-image:url(../images/move.png);
  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;
}

Javascript:

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";
  }
    
}

效果图:

用js实现放大镜的效果的简单实例

1、move块的计算

用js实现放大镜的效果的简单实例

黑色箭头:

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;

2、bimg块的计算

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

move块的移动范围:

bbox.offsetWidth-bmove.offsetWidth

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

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

bimg的移动范围:

b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置:

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

以上这篇用js实现放大镜的效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
js arguments对象应用介绍
Nov 28 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
js脚本实现数据去重
Nov 27 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
JS作用域链详解
Jun 26 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
jQuery实现摸拟alert提示框
May 22 #Javascript
javascript实现标签切换代码示例
May 22 #Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
JavaScript数组合并的多种方法
May 22 #Javascript
浅析JavaScript回调函数应用
May 22 #Javascript
为什么JavaScript没有块级作用域
May 22 #Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 #Javascript
You might like
php异常处理使用示例
2014/02/25 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
JS中定位 position 的使用实例代码
2017/08/06 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
vue仿ios列表左划删除
2019/09/26 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python脚本和网页有何区别
2020/07/02 Python
python安装sklearn模块的方法详解
2020/11/28 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
优秀教师先进事迹材料
2014/12/15 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
慰问信范文
2015/02/14 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android