JS实现图片放大镜功能

时间: 2018-12-15阅读: 1436标签: 图片

将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。需要实现的效果如下:


基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。


htmlcss内容如下:

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style type="text/css" media="screen">
        img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    float: left;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(images/Layer14.png);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
    float: left;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }
    </style>
</head>
<body>
    <!-- 原始图片区域 -->
    <div id="pic_wrap">
        <!-- 放大镜所示区域 -->
        <div id="float_box"></div>
        <img src="images/Layer14.png" >
    </div>
    <div id="show">
        <!-- 预留的放大后的图片 -->
        <img src="images/Layer14.png" id="big_img">
    </div>
</body>


html和CSS写好之后,利用js给放大镜加交互效果

当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。

当鼠标没有移除,且鼠标在图片内不停地移动, 需要加onmousemove事件。

当鼠标完全移除后,需要加onmouseout事件。

onmouseover事件需要让放大镜和可视窗口显示出来。

onmousemove事件,让放大镜和可视窗口中的图片同时移动。

onmouseout时间,让放大镜和可是窗口消失!


js代码如下:

var pic_wrap = document.getElementById(‘pic_wrap‘),
    float_box = document.getElementById("float_box"),
    show = document.getElementById(‘show‘);
    big_img = document.getElementById("big_img");
  //鼠标移入事件,让放大镜和放大区显示!
  pic_wrap.onmouseover = function() {
    float_box.style.display = "block";
    show.style.display = "block";
  }
  //鼠标不断移动时触发,实时更新放大镜得到的图片
  pic_wrap.onmousemove = function(event) {
    floatMove(float_box, pic_wrap, event);
    showPic();
  }
  //鼠标移出后,放大镜和放大区隐藏
  pic_wrap.onmouseout = function() {
    float_box.style.display = "none";
    show.style.display = "none";
  }  
      //由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr!
  function getStyle(obj, attr) {
    if (window.currentStyle) {
      return parseInt(obj.currentStyle[attr]);
    }
    else {
      return parseInt(getComputedStyle(obj,null)[attr]);
    }
  }
  //运动框架,控制放大镜在原图中的位置!
  function floatMove(argu1, argu2, event) {
    var e = event ||window.event;
    var minLeft = getStyle(argu1, "width");
    var maxLeft = getStyle(argu2, "width") - minLeft/2;
    var minHeight = getStyle(argu1, "height");
    var maxHeight = getStyle(argu2, "height") - minHeight/2;
    console.log(maxLeft);
    console.log(maxLeft - minLeft/2);
    if (e.clientX < minLeft/2) {
      float_box.style.left = "0px";//防止放大镜超出左边框
    }
    else if (e.clientX > maxLeft) {
      float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
    }
    else {
      float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
    }
    if (e.clientY < minHeight/2) {
      float_box.style.top = "0px"; //防止放大镜超出上边框
    }
    else if (e.clientY > maxHeight) {
      float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
    }
    else {
      float_box.style.top = event.clientY - minLeft/2 + "px";
    }
  }
  //用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域
  function showPic() {
    var iCurLeft = getStyle(float_box,"left");
    var iCurTop = getStyle(float_box,"top");
    var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
    var b = getStyle(big_img,"width") - getStyle(show,"width");    
    var moveWidth = -(iCurLeft/a)*b;
    big_img.style.left = moveWidth + "px";
    var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
    var d = getStyle(big_img,"height") - getStyle(show,"height");
    var moveHigth = -(iCurTop/c)*d;
    big_img.style.top = moveHigth + "px";
  }


来源:https://www.cnblogs.com/web12/p/10093486.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1589

关闭

性感与色情有多远_你不知道的图片鉴黄那些事

图片鉴黄服务市场容量巨大,作为移动互联网行业最为热门的创业领域,移动社交类App每天生产大量图片,并有无数色情图片混杂其中,所以高效准确地鉴别和剔除淫秽色情信息成为一项十分艰巨的任务。此外,移动直播的大热也导致图片鉴黄需求大增,尤其对于中小开发团队而言

HTML图像标签img和源属性src及Alt属性、宽高、对齐

使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性:源属性src和alt,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

js实现图片转base64格式,并压缩上传

需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器失败图片的身份证号码。由于很多用户用手机拍摄的照片

h5本地预览上传的图片或视频

通过<input id=input type=file onchange=changeFile()> 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频,可以通过以下两种方式预览本地图片,不用上传到服务器就可以本地预览。

前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

小程序如何在业务系统中接入图片安全校验

在小程序开发的过程中,如果你的小程序中存在图片上传的能力,经常会遇到同一个原因被拒绝审核:「没有对上传信息做审核」,想要过审核也很简单,只要将用户上传的图片提交审核就可以了

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!