放大境效果如下图所示，当鼠标放到小图时，就会出现浅黄色的小块，而右边方框也出现了，并且右边方框的内容时根据浅黄色小块的内容变换而变换；

原理：

　　1，准备2张图，一大一小，如上图所示，小图的盒子div1放小图，大图的盒子div2放大图，  div2一定要小于大图，假设oSapn在oDiv中距离左边的距离（L） ，即oSapn在oDiv中距离上边的距离（T）

　　2、计算浅黄色的小块（span）在小图中的移动比例，然后把比例赋给大图即可

　　　　向左的移动比例为：   L / (div1.offsetWidth - span.offsetWidth)

　　　　向上的移动比例为：  T / (div1.offsetHeight - span.offsetHeight)

注意：在div1中有一句<div id="mask"></div>，这个的大小与div1一样大，这是为了解决----子集事件影响父级事件的bug的

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>放大境效果</title>

    <style>

	#div1 {width: 200px;height: 200px;overflow: hidden;position: relative;}

	#div1 span {width: 100px;height: 100px;background: yellow;opacity: 0.5;

		filter: alpha(opacity=50);position: absolute;left: 0;top: 0;display: none;

	}

	#div1 img{width: 100%;}

	#mark {width: 200px;height: 200px;background: red;position: absolute;left: 0;top: 0;

		opacity: 0;filter: alpha(opacity=0);

	}

	#div2 {width: 300px;height: 300px;position: absolute;left: 250px;top: 0px;overflow: hidden;}

	#div2 img {position: absolute;left: 0;top: 0;width: 580px;height: 580px;}

    </style>

    <script type="text/javascript">

	window.onload = function() {

	    var oDiv = document.getElementById('div1');

	    var oSpan = oDiv.getElementsByTagName('span')[0];

	    var oDiv2 = document.getElementById("div2");

	    var img2 = oDiv2.getElementsByTagName("img")[0];

	    oDiv.onmouseover = function() {

		oSpan.style.display = "block";

		oDiv2.style.display = "block";

	   }

	   oDiv.onmouseout = function() {

		oSpan.style.display = "none";

		oDiv2.style.display="none";

	   }

	   oDiv.onmousemove = function() {

		var ev = ev || window.event;

		//默认情况在鼠标在oSpan的中心点，求出oSapn在oDiv中距离左边的距离与上边的距离

		var L = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;

		var T = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;

		if(L < 0) {

			L = 0

		} else if(L > oDiv.offsetWidth - oSpan.offsetWidth) {

			L = oDiv.offsetWidth - oSpan.offsetWidth;

		}

		if(T < 0) {

			T = 0

		} else if(T > oDiv.offsetHeight - oSpan.offsetHeight) {

			T = oDiv.offsetHeight - oSpan.offsetHeight;

		}

		oSpan.style.left = L + 'px';

		oSpan.style.top = T + 'px';

		//移动比例

		var scaleX = L / (oDiv.offsetWidth - oSpan.offsetWidth);

		var scaleY = T / (oDiv.offsetHeight - oSpan.offsetHeight);

		//给负值是为了反方向移动

		img2.style.left = -scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + "px";

		img2.style.top = -scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + "px";

	    }

	}

    </script>

</head>

<body>

    <div id="div1">

	<img src="img/b2.jpg" />

	<span></span>

	<div id="mask"></div>

    </div>

    <div id="div2">

	<img src="img/b1.jpg" />

    </div>

</body>

</html>

js图片放大境效果的更多相关文章

  1. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  2. HTML5鼠标hover的时候图片放大的效果展示

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

  3. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  4. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  5. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  6. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  7. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  8. 第六十七篇、OC_UITableView head下拉图片放大的效果

    (一) 布置UITableview 我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset 来为图片视图留出位置,这里我们的图片高度暂定为280 ; ...

  9. 顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析

    原理并不难.  代码量也不大.  非常简洁 .  先来个效果图 再上一波代码. public class SpecialScrollView extends ScrollView implements ...

随机推荐

  1. 备份一下alias喽

    # 每次grep都显示出行号示出行号 alias grep="grep -n" # grep反向选择并显示行号显示行号 alias vgrep="grep -n -v&q ...

  2. JS模拟实现题目（new debounce throwee 等）

    模拟new实现 function newObject() { let obj = new Object(); let Con = [].shift.apply(arguments) obj.__pro ...

  3. termios, tcgetattr, tcsetattr, tcsendbreak, tcdrain, tcflush, tcflow, cfmakeraw, cfgetospeed, cfgetispeed, cfsetispeed, cfsetospeed - 获取和设置终端属性，行控制，获取和设置波特率

    SYNOPSIS 总览 #include <termios.h> #include <unistd.h> int tcgetattr(int fd, struct termio ...

  4. 【JS学习】慕课网4-1编程挑战 函数

    要求:小伙伴们,请编写"改变颜色"."改变宽高"."隐藏内容"."显示内容"."取消设置"的函数,点 ...

  5. git的一些简单用法

    1.工作区暂存区和仓库区 工作区 对于添加.修改.删除文件的操作,都发生在工作区中 暂存区 暂存区指将工作区中的操作完成小阶段的存储,是版本库的一部分 仓库区 仓库区表示个人开发的一个小阶段的完成 仓 ...

  6. Manacher模板（O（n）内求最长回文串长度）

    转自:https://segmentfault.com/a/1190000008484167 /* 由于回文分为偶回文(比如 bccb)和奇回文(比如 bcacb),而在处理奇偶问题上会比较繁琐,所以 ...

  7. 08-01-json-loggin-模块

    复习 ''' ATM: -- start.py BASE_DIR = os.path.dirname(__file__) sys.path.append(BASE_DIR) -- conf -- li ...

  8. 61. File类

    IO技术主要作用是解决设备与设备之间的数据传输问题.比如:硬盘---->内存     内存的数据---->硬盘上    把硬盘的数据------>内存中 IO技术的应用场景:     ...

  9. 【转】 MySQL主从（Master-Slave）复制

    首先声明:此文是在失去U盘极度郁闷的时候写的,有些零散,估计也有错误.欢迎大家指出 MYSQL服务器复制配置   这是根据我之前看的MYSQL复制的文档然后自己亲自实验的过程.配置的功能比较简单. 环 ...

  10. jQuery的属性、遍历和HTML操作

    一.属性操作   1..attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图 ...