用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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
jQuery限制图片大小的方法
May 25 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
微信小程序sessionid不一致问题解决
Aug 30 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP输入流php://input介绍
2012/09/18 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
js生成随机数之random函数随机示例
2013/12/20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
黄河象教学反思
2014/02/10 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
司法所长先进事迹
2014/06/02 职场文书
绘画专业自荐信
2014/07/04 职场文书
课内比教学心得体会
2014/09/09 职场文书
学生偷窃检讨书
2014/09/25 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
自我推荐信怎么写
2015/03/24 职场文书
项目战略合作意向书
2015/05/08 职场文书