用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变量作用域及可访问性的探讨
Nov 23 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
jquery 插件学习(三)
Aug 06 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue-cli配置环境变量的方法
Jul 09 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 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
2021年最新CPU天梯图
2021/03/04 数码科技
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
javascript的几种写法总结
2016/09/30 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
python遍历类中所有成员的方法
2015/03/18 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
班组长岗位职责范本
2014/01/05 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
工作评语大全
2014/04/26 职场文书
行政监察建议书
2014/05/19 职场文书
物流专业自荐信
2014/05/23 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
团日活动总结格式
2015/05/11 职场文书
小学校本教研总结
2015/08/13 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python