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

原理：

　　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. #include和前置声明(forward declaration)

    #include和前置声明(forward declaration) 1.    当不需要调用类的实现时,包括constructor,copy constructor,assignment opera ...

  2. 2019牛客多校第⑨场J Symmetrical Painting(思维，离散化)

    原题:https://ac.nowcoder.com/acm/contest/889/J 题意: 二维平面上有n个矩形,每个矩形左下角是(i−1,Li)(i−1,Li), 右上角是(i,Ri)(i,R ...

  3. PAT_A1100#Mars Numbers

    Source: PAT A1100 Mars Numbers (20 分) Description: People on Mars count their numbers with base 13: ...

  4. vue mock数据（模拟后台）

    本文转载自:https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource,首先通 ...

  5. PHP中使用raw格式发送POST请求

    如果请求的参数格式是原生(raw)的内容,应该如何为程序构造一个POST请求函数呢? function http_post($url, $data_string) { $ch = curl_init( ...

  6. Redis Sentinel 高可用方案

      redis 主从复制的问题 Redis主从复制可将主节点数据同步给从节点,从节点此时有两个作用: 1,一旦主节点宕机,从节点作为主节点的备份可以随时顶上来. 2,扩展主节点的读能力,分担主节点读压 ...

  7. .sync 修饰符的理解

    正常 子组件: this.$emit('update:title', newTitle) 父组件: <text-document v-bind:title="doc.title&quo ...

  8. Spring定时器StopWatch

    简单总结一句,Spring提供的计时器StopWatch对于秒.毫秒为单位方便计时的程序,尤其是单线程.顺序执行程序的时间特性的统计输出支持比较好.也就是说假如我们手里面有几个在顺序上前后执行的几个任 ...

  9. LLppdd's class meeting!

    LLppdd's class meeting! Time Limit: 1 s Memory Limit: 256 MB 题目背景 LLppdd 有一个可爱团结的班级,他们会定期举行班会活动...比如 ...

  10. android中SharedPreferences

    SharedPreferences:用于存储少量并且数据格式简单,基本上都是普通的字符串,标量类型的值,比如:应用程序的各种配置信息等. SharedPreferences:保存的数据格式主要是key ...