javascript图片放大镜效果展示

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 350px;

            height: 350px;

            margin:100px;

            border: 1px solid #ccc;

            position: relative;

        }

        .big {

            width: 400px;

            height: 400px;

            position: absolute;

            top: 0;

            left: 360px;

            border: 1px solid #ccc;

            overflow: hidden;

            display: none;

        }

        .mask {

            width: 175px;

            height: 175px;

            background: rgba(255, 255, 0, 0.4);

            position: absolute;

            top: 0;

            left: 0;

            cursor: move;

            display: none;

        }

        .small {

            position: relative;

        }

        img {

            vertical-align: top;

        }

    </style>

    <script src="animate.js"></script>

    <script>

        window.onload = function () {

            //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。

            //技术点：onmouseenter==onmouseover 第一个不冒泡

            //技术点：onmouseleave==onmouseout  第一个不冒泡

            //步骤：

            //1.鼠标放上去显示盒子，移开隐藏盒子。

            //2.老三步和新五步（黄盒子跟随移动）

            //3.右侧的大图片，等比例移动。

            //0.获取相关元素

            var box = document.getElementsByClassName("box")[0];

            var small = box.firstElementChild || box.firstChild;

            var big = box.children[1];

            var mask = small.children[1];

            var bigImg = big.children[0];

            //1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件)

            small.onmouseenter = function () {

                //封装好方法调用：显示元素

                show(mask);

                show(big);

            }

            small.onmouseleave = function () {

                //封装好方法调用：隐藏元素

                hide(mask);

                hide(big);

            }

            //2.老三步和新五步（黄盒子跟随移动）

            //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随)

            small.onmousemove = function (event) {

                //想移动黄盒子，必须知道鼠标在small中的位置。x作为mask的left值，y作mask的top值。

                //新五步

                event = event || window.event;

                var pagex = event.pageX || scroll().left + event.clientX;

                var pagey = event.pageY || scroll().top + event.clientY;

                //让鼠标在黄盒子最中间，减去黄盒子宽高的一半

                var x = pagex - box.offsetLeft - mask.offsetWidth/2;

                var y = pagey - box.offsetTop - mask.offsetHeight/2;

                //限制换盒子的范围

                //left取值为大于0，小盒子的宽-mask的宽。

                if(x<0){

                    x = 0;

                }

                if(x>small.offsetWidth-mask.offsetWidth){

                    x = small.offsetWidth-mask.offsetWidth;

                }

                //top同理。

                if(y<0){

                    y = 0;

                }

                if(y>small.offsetHeight-mask.offsetHeight){

                    y = small.offsetHeight-mask.offsetHeight;

                }

                //移动黄盒子

                console.log(small.offsetHeight);

                mask.style.left = x + "px";

                mask.style.top = y + "px";

                //3.右侧的大图片，等比例移动。

                //如何移动大图片？等比例移动。

                //    大图片/大盒子 = 小图片/mask盒子

                //    大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子）

//                var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);

                //大图片走的距离/mask盒子都的距离 = 大图片/小图片

                var bili = bigImg.offsetWidth/small.offsetWidth;

                var xx = bili*x;

                var yy = bili*y;

                bigImg.style.marginTop = -yy+"px";

                bigImg.style.marginLeft = -xx+"px";

            }

        }

    </script>

</head>

<body>

    <div class="box">

        <div class="small">

            <img src="data:images/001.jpg" alt=""/>

            <div class="mask"></div>

        </div>

        <div class="big">

            <img src="data:images/0001.jpg" alt=""/>

        </div>

    </div>

</body>

</html>

　　javascript引出

//显示

function show(ele){

	ele.style.display="block";

}

//隐藏

function hide(ele){

	ele.style.display="none";

}

//动画效果的基本原理

function animate(ele,target){

	clearInterval(ele.timer);

	ele.timer=setInterval(function(){

		var step=(target-ele.offsetTop)/10;

		step=step>0?Math.ceil(step):Math.floor(step);

		ele.style.top=ele.offsetTop+step+"px";

		if (Math.abs(target-ele.offsetTop)<Math.abs(step)) {

			ele.style.top=target+"px";

			clearInterval(ele.timer);

		}

	},25)

}

function scroll(){

	if (window.pageYOffset!=null) {

		return{

			left:window.pageXOffset,

			top:window.pageYOffset

		}

	}else if (document.compatMode==="Css1compat") {

		return{

			left:document.documentElement.scrollLeft,

			top:document.documentElement.scrollTop

		}

	}else{

		return{

			left:document.body.scrollLeft,

			top:document.body.scrollTop

		}

	}

}

　　

javascript图片放大镜效果展示的更多相关文章

  1. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  5. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  6. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas知识02：图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

随机推荐

  1. Android商城开发系列（七）—— 使用RecyclerView展示首页数据

    前面我们讲到了使用OkHttp请求网络和FastJson解析数据了,接下来我们就开始把获取到的数据通过数据适配器展示在页面上了.Adapter是用来帮助填充数据的中间桥梁,简单点说就是:将各种数据以合 ...

  2. UVALive 4670 Dominating Patterns （AC自动机）

    AC自动机的裸题.学了kmp和Trie以后不难看懂. 有一些变化,比如0的定义和f的指向,和建立失配边,以及多了后缀连接数组last.没有试过把失配边直接当成普通边(一开始还是先这样写吧). #inc ...

  3. Spark 配置整理

    Spark 的配置有很多,这里一方面总结一下官方文档中的内容,一方面将网上查到的资料中用到的针对特定问题的配置整理一下. 先看一下官网的配置:http://spark.apache.org/docs/ ...

  4. 第011课_串口(UART)的使用

    from: 第011课_串口(UART)的使用 第001节_辅线1_硬件知识_UART硬件介绍 1. 串口的硬件介绍 UART的全称是 Universal Asynchronous Receiver ...

  5. idea中pom.xml没有工作 IDEA中maven项目pom.xml依赖不生效解决

    问题: 今天在web项目中需要引入poi相关jar包.查看之下才发现pom.xml中的依赖虽然已经下载到了本地仓库 repository,但是却没有加入到项目路径的 Extenal Libraries ...

  6. java,求1-100以内所有偶数的和。

    package study01; public class Even { public static void main(String[] args) { int sum = 0; for (int ...

  7. C语言结构体和共用体_07

    概述 定义结构体类型变量的方法 结构体变量的引用 结构体变量的初始化 结构体数组 指向结构体类型数据的指针 用指针处理链表 共用体 枚举类型 用 typedef定义类型  概述 定义一个结构体的一般形 ...

  8. 【转】EM算法原理

    EM是我一直想深入学习的算法之一,第一次听说是在NLP课中的HMM那一节,为了解决HMM的参数估计问题,使用了EM算法.在之后的MT中的词对齐中也用到了.在Mitchell的书中也提到EM可以用于贝叶 ...

  9. luogu4608 [FJOI2016]所有公共子序列问题

    题目描述: luogu loj 题解: 序列自动机(?)+高精+普及dp. 这个是猫老师的序列自动机(字符串从1开始): ]) { memset(t[n],-,sizeof(t[n])); ;i> ...

  10. Linux 用户管理切换用户su和提取命令sudo-visudu详解

    一.su --run a shell with substitute user and group IDs -,-l,--login make the shell a login shell, cle ...