原生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 ...

随机推荐

java贪吃蛇
这个贪吃蛇有很多功能没有实现,比如说穿墙(本来可以实现,但是穿墙后,就会出现坐标混乱,吃不到食物了),还有碰到自己的身体死亡的情况也没有实现,现在我知道如何判断是否碰到身体,但是,我不知道,如何处理碰 ...
IOS判断设备是否已越狱
转自:http://www.cnblogs.com/supercheng/archive/2012/12/05/2804166.html - (BOOL)isJailbroken { BOOL jai ...
goroutine
Go语言从诞生到普及已经三年了,先行者大都是Web开发的背景,也有了一些普及型的书籍,可系统开发背景的人在学习这些书籍的时候,总有语焉不详的感觉,网上也有若干流传甚广的文章,可其中或多或少总有些与事实 ...
property内存管理策略
1普通数据,用weak 2delegate,用weak 3一般对象,用strong 4NSString,用copy 5block,用copy
jdbcTemplate的Dao层封装
package com.easyrail.base.dao; import java.io.Serializable; import java.lang.reflect.Field; import j ...
TAP/TUN浅析（一）
参考链接:https://www.ibm.com/developerworks/cn/linux/1310_xiawc_networkdevice/ TAP 设备与 VETH 设备 TUN/T ...
text-decoration
2016-08-18 text-decoration blink貌似在firefox里也不起作用? <p style="color:red;text-decoration:unde ...
AES,RSA对称加密和非对称加密
1.关于RSA加密机制:是非对称加密方式,两个钥,公钥和私钥,公钥用于加密数据,可以分享给其他用户,私钥可以用于解密用公钥加密的数据,关于安全问题是公钥泄露不会影响安全问题,公钥与私钥是一一对应的关系 ...
使用 Sublime Text 2 开发 Unity3D 项目
用 Sublime 已经有很长一段时间,很舒适,很贴心,根本停不下来.之前因为是开发页游,所以是用 AS3 开发,近段时间,新开了个手游项目,引擎方面选定了 Unity3D,老实说,之前没有太多的 3 ...
Binary Tree Zigzag Level Order Traversal [LeetCode]
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

原生js实现放大镜效果

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

随机推荐

热门专题