原生js实现放大镜效果

　　今天做任务的时候，有一个任务就是让实现电商网站常用的放大镜效果，类似于这样的效果，之前并没有做过这种放大镜效果，刚开始的思路是对图片进行裁剪，但是后来发现实在是难以实现，于是求助了万能的谷歌，发现一个很好的思路就是，展示区是一小块可视区域，给他一个图片，超出可视区域的部分设为隐藏，有了这个思路，这个效果就能够很好的实现了，先看一下HTML结构！

<div id="pic_wrap">

    <div id="float_box"></div>

    <img src="1.jpg">

</div>

<div id="show">

    <img src="1.jpg" id="big_img">

</div>

　　最外层的两个div，分别是商品原始图片区域，和放大后的可视区域！id为float_box的区域为放大镜所示的区域！第一个img为商品图片，第二个img为预留的放大后的商品！图片CSS代码如下！

        img {

            width: 250px;

            height: 150px;

        }

        #pic_wrap {

            position: relative;

            width: 250px;

            height: 150px;

        }

        #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(1.jpg);

            height: 450px;

            width: 750px;

            background-repeat: no-repeat;

            background-size: cover;

            position: relative;

        }

        #show {

            width: 300px;

            height: 300px;

            background-color: white;

            opacity:;

            filter: opacity(alpha:1);

            overflow: hidden;

            display: none;

        }

HTML和CSS写好之后，就要利用js给放大镜加一些交互效果！

　　第一步，当鼠标移入的时候，放大镜能够显示出来！需要加onmouseover事件。

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

　　第三步，当鼠标完全移除后，需要加onmouseout事件。

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

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

　　第六步，onmouseout时间，让放大镜和可是窗口消失！

完整代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        /*body {

            margin: 0;

            padding: 0;

        }*/

        img {

            width: 250px;

            height: 150px;

        }

        #pic_wrap {

            position: relative;

            width: 250px;

            height: 150px;

        }

        #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(1.jpg);

            height: 450px;

            width: 750px;

            background-repeat: no-repeat;

            background-size: cover;

            position: relative;

        }

        #show {

            width: 300px;

            height: 300px;

            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="1.jpg">

    </div>

    <div id="show">

        <img src="1.jpg" id="big_img">

    </div>

<script src="等比放大镜.js"></script>

<script type="text/javascript">

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

    }

</script>

</body>

</html>

原生js实现放大镜效果的更多相关文章

React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
原生js实现的效果
原生js实现tooltip提示框的效果在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
原生js仿jquery--animate效果
效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
js之放大镜效果
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

随机推荐

CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
session失效
今天写页面时,使用了session 设置session后跳转页面session就丢失上网查了一下也没有很好的解决办法也没有说原因. 在自己本地电脑上写了两个页面测试一下,完全正常.但是上传到服务 ...
Java链接MySQL练习题：格式化日期、性别；避免代码注入
一.查询人员名单,按序号姓名性格(男或女) 民族(某族) 生日(年月日)输出 import java.sql.*; import java.text.SimpleDateFormat; publi ...
c++ is_space函数
C库函数int isspace(int c)检查传递的字符是否是空白. 标准空白字符: ' ' (0x20) space (SPC) ' ' (0x09) horizontal tab (TAB) ' ...
JSP隐藏过长字段
<div class="objDiv" title="${fof.fundName }"> <c ...
restassured - JsonPath
https://github.com/rest-assured/rest-assured/blob/master/json-path/src/test/java/io/restassured/path ...
Apache Commons BeanUtils
http://commons.apache.org/proper/commons-beanutils/javadocs/v1.9.2/apidocs/org/apache/commons/beanut ...
【LeetCode】#344 Reverse String
[Question] Write a function that takes a string as input and returns the string reversed. Example: G ...
Git代码管理常用命令
1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remote -v添加远程仓库:$ git re ...
MyBatis Generator 详解
MyBatis Generator中文文档 MyBatis Generator中文文档地址:http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中 ...

原生js实现放大镜效果

原生js实现放大镜效果的更多相关文章

随机推荐

热门专题