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

原理：

　　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. UVA 822 Queue and A

    题目链接:https://vjudge.net/problem/UVA-822 翻译摘自:<算法禁赛入门经典> 题目大意 你的任务是模拟一个客户中心运作情况.客服请求一共有n(1 ≤ n ...

  2. python学习笔记：python操作redis

    Redis 是一个高性能的key-value数据库.它支持存储的value类型包括string(字符串).list(链表).set(集合).zset(sorted set --有序集合)和hash(哈 ...

  3. ztree 数组和树结构互转算法

    //树转化为数组transformToArrayFormat: function (setting, nodes) { if (!nodes) return []; var childKey = se ...

  4. 如何将英文版的Firefox添加中文版语言包

    http://ftp.mozilla.org/pub/firefox/releases/ xpi中下载zh_CN.xpi 文件 , 把文件拖拽进火狐浏览器 在地址栏输入”about:config”,回 ...

  5. python base64编码实现

    alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" def encode(b ...

  6. 神器，阿里巴巴Java代码检查插件

    背景 不久,又一气呵成发布了Eclipse/Intellij Idea下的代码检测插件PC3,可谓是国内代码优秀的检测插件.此插件检测的标准是根据<<阿里巴巴Java开发手册(终极版)&g ...

  7. JSON工具类的构建(后端版本)

    前言 在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端). 而这次的一个算是作业吧,前后端都是我,所以就研究了一下JSON交互在java web的应用(主要是前端). 优缺点 前后端耦 ...

  8. 关于禁止微信端webapp内部下拉出现QQ浏览器的问题

    <!DOCTYPE html> <html> <head> <title></title> </head> <style ...

  9. python学习之路，2018.8.9

    python学习之路,2018.8.9, 学习是一个长期坚持的过程,加油吧,少年!

  10. 安装APK到android设备那些事儿

    APK是AndroidPackage的缩写,即Android系统的应用软件安装包(apk).APK是类似Symbian Sis或Sisx的文件格式.通过将APK文件直接传到Android模拟器或And ...