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

原理：

　　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. dfs与dp算法之关系与经典入门例题

    目录 声明 dfs与dp的关系 经典例题-数字三角形 - POJ 1163 题目 dfs思路 解题思路 具体代码 dp思路 解题思路 具体代码 声明 本文不介绍dfs.dp算法的基础思路,有想了解的可 ...

  2. jupyter notebook的魔法命令 % %%

    Magic单元分为两种,一种是line magics,另外一种cell magics. Line magic是通过在前面加%,表示magic只在本行有效. Cell magic是通过在前面加%%,表示 ...

  3. java中多态的要点

    多态有三要素 继承.方法重写.父类引用指向子类对象 多态可以理解成两个部分:一个是编译时,一个是运行时 编译时:定义规则:运行时:具体实现这个规则. 编译时:把父类强制转换成子类不会报错:运行时:先去 ...

  4. fedora 25重新安装引导

    引导区被其他系统给覆盖了,重新安装引导 grub2-install /dev/sdb GRUB_SAVEDEFAULT=true BIOS grub2-mkconfig -o /boot/grub2/ ...

  5. bitmat

    Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1138  Solved: 556[Submit][Status][Discuss] Descripti ...

  6. Neo4j高级应用技术专题系列 - APOC存储过程库-【1】概述

    Neo4j高级应用技术专题系列 - APOC存储过程库-[1]概述 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://bl ...

  7. 【目录】mysql 基础篇系列

    随笔分类 - mysql 基础篇系列 mysql 开发基础系列22 SQL Model(带迁移事项) 摘要: 一.概述 与其它数据库不同,mysql 可以运行不同的sql model 下, sql m ...

  8. 算法竞赛模板 动态规划之背包DP

    ① 01背包 有n件物品和一个容量为v的背包.第i件物品的价值是c[i],体积是w[i].求解将哪些物品装入背包可使价值总和最大. 这是最基础的背包问题,特点是:每种物品仅有一件,可以选择放或不放. ...

  9. maven环境变量配置及测试

    首先要确认,你是否已经安装了jdk,并且已经成功配置了环境变量. 和java配置类似,计算机右键属性->高级系统设置->环境变量. 添加如下变量: 变量名:maven_home 变量值:C ...

  10. 【转载】github 查找最火项目

    博主感觉这篇文章很有用,很方便所以转载过来学习学习. 原文链接地址https://www.cnblogs.com/poterliu/p/10634568.html 如何在github上查找star最多 ...