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

原理：

　　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. HDU4578-Transformation-线段树的加、乘、变、次方操作

    Sample Input 5 5 3 3 5 7 1 2 4 4 4 1 5 2 2 2 5 8 4 3 5 3 0 0 Sample Output 307 7489 题意:给出n,m,表示该数有n个 ...

  2. 【react】---redux-actions的基本使用---【巷子】

    一.安装 cnpm install --save redux-actions 二.为什么使用 redux-actions reducer使用switch case语句进行action类型判断,当act ...

  3. 防止重复提交 aspx.net

    :服务器控制.后台生成一个token,存入session或者其他缓存里面.渲染表单时,给form一个隐藏的token(令牌).用户提交表单时:先判断表单里面的token是否存在,不存在拒绝接受此数据: ...

  4. Head First PHP &MySQL学习笔记

      最近一段时间在学习PHP,买了<Head First PHP&MySQL>中文版这本书,之前买过<Head First设计模式>,感觉这系列的书籍总体来说很不错. ...

  5. filter 在CSS用的效果

    滤镜说明: Alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 Chroma:制作专用颜色透明 DropShadow:创建对象的固定影子 FlipH:创建水平镜像图片 FlipV:创建 ...

  6. mvnw简介

  7. Emacs25.1之后UrlHttpError

    Emacs25.1之后UrlHttpError */--> pre.src {background-color: #002b36; color: #839496;} pre.src {backg ...

  8. if (user?.Identity?.IsAuthenticated ?? false)这几个问号分别都代表啥意思？

    if (user?.Identity?.IsAuthenticated ?? false)这几个问号分别都代表啥意思? 0 悬赏园豆:5 [已解决问题] 浏览: 229次 解决于 2018-05-16 ...

  9. Android Studio在Ubuntu下离线安装Gradle

    更新android studio3.0后又要升级gradle了,估计又要很长时间,晚上临走前跟开始更新下载,第二天一早发现又卡了,吐血. 在某CSDN下载gradle-4.1-all.zip,直接手动 ...

  10. 【学术篇】SPOJ GEN Text Generator AC自动机+矩阵快速幂

    还有5天省选才开始点字符串这棵技能树是不是太晚了点... ~题目の传送门~ AC自动机不想讲了QAQ.其实很久以前是学过然后打过板子的, 但也仅限于打过板子了~ 之前莫名其妙学了一个指针版的但是好像不 ...