<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>放大镜</title>

	<style type="text/css">

	*{margin:0;padding:0;}

	.container{width: 200px;height: 200px;padding: 5px;border:1px solid #CCC;position: relative;left: 50px;top: 50px;}

	.container .small_pic{width: 200px;height: 200px;background: #ccc;position: relative;}

	.container .float_layer{width: 50px;height: 50px;border:1px solid #000;background: #fff;filter:alpha(opacity: 30);opacity: 0.3;position: absolute;top: 0;left: 0;z-index: 1;display: none;}

	.container .mask{width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;background: red;filter:alpha(opacity: 0);opacity: 0;}

	.container .big_pic{position: absolute;top: -1px;left: 215px;width: 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;}

	.container img{position: absolute;top: 0;left: 0;}

	</style>

</head>

<body>

	<div class="container"  id="div1">

		<div class="small_pic">

			<span class="mask"></span>

			<span class="float_layer"></span>

			<img src="http://b.hiphotos.baidu.com/image/w%3D310/sign=6c8629c441540923aa69657fa259d1dc/b812c8fcc3cec3fd1d347092de88d43f869427cb.jpg" />

		</div>

		<div class="big_pic">

			<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=c53e905c4f10b912bfc1f0fff3fcfcb5/83025aafa40f4bfbf3c249b30b4f78f0f63618c2.jpg" />

		</div>

	</div>

	<script type="text/javascript">

	var util = {			//获取类名

		getByClass : function(oParent,oClass){

			var oEle = oParent.getElementsByTagName('*');

			var oTemp = [];

			for(var i = 0 ; i < oEle.length ; i++){

				if(oEle[i].className == oClass){

					oTemp.push(oEle[i]);

				}

			}

			return oTemp;

		}

	}

	window.onload = function(){

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

		var oMask = util.getByClass(oDiv,'mask')[0];

		var oFloat = util.getByClass(oDiv,'float_layer')[0];

		var oBig = util.getByClass(oDiv,'big_pic')[0];

		var oSamll = util.getByClass(oDiv,'small_pic')[0];

		var oImg = oBig.getElementsByTagName('img')[0];

		oMask.onmouseover = function(){

			oFloat.style.display = "block";

			oBig.style.display = "block";

		}

		oMask.onmouseout = function(){

			oFloat.style.display = "none";

			oBig.style.display = "none";

		}

		oMask.onmousemove = function(e){

			var e = e || window.event;

			var oLeft = e.clientX - oDiv.offsetLeft - oSamll.offsetLeft - oFloat.offsetWidth / 2;		//灰色遮罩层偏移量

			var oTop = e.clientY - oDiv.offsetTop - oSamll.offsetTop - oFloat.offsetHeight / 2;

			if(oLeft < 0){			//边缘判断

				oLeft = 0;

			}else if(oLeft > oMask.offsetWidth - oFloat.offsetWidth){

				oLeft = oMask.offsetWidth - oFloat.offsetWidth;

			}

			if(oTop < 0){

				oTop = 0;

			}else if(oTop > oMask.offsetHeight - oFloat.offsetHeight){

				oTop = oMask.offsetHeight - oFloat.offsetHeight;

			}

			oFloat.style.left = oLeft + 'px';

			oFloat.style.top = oTop + 'px';

			var oPercentX = oLeft / (oMask.offsetWidth - oFloat.offsetWidth);			//两图比例计算

			var oPercentY = oTop / (oMask.offsetHeight - oFloat.offsetHeight);

			oImg.style.left = -oPercentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px';		//最终大图所处位置

			oImg.style.top = -oPercentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';

		}

	}

	</script>

</body>

</html>

可复制下来直接使用

比较简单放大镜效果

【JavaScript】放大镜效果的更多相关文章

  1. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  2. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

随机推荐

  1. 编辑距离——Edit Distance

    编辑距离 在计算机科学中,编辑距离是一种量化两个字符串差异程度的方法,也就是计算从一个字符串转换成另外一个字符串所需要的最少操作步骤.不同的编辑距离中定义了不同操作的集合.比较常用的莱温斯坦距离(Le ...

  2. 个人博客作业Week2

    一.是否需要有代码规范 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我反驳这个观点,这些规范是成千上万的程序员在开发程序中总结出来的代码规范,他有助于我们的开 ...

  3. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  4. java中观察者模式Observable和Observer

    25.java中观察者模式Observable和Observer 如果想要实现观察者模式,则必须依靠java.util包中提供的Observable类和Observer接口 观察者设计模式 现在很多的 ...

  5. Android开源测试框架学习

    近期因工作需要,分析了一些Android的测试框架,在这也分享下整理完的资料. Android测试大致分三大块: 代码层测试 用户操作模拟,功能测试 安装部署及稳定性测试 代码层测试 对于一般java ...

  6. C语言局部变量和全局变量的区别。——Arvin

    局变量是使用相同的内存块在整个类中存储一个值. 全局变量的存在主要有以下一些原因:  1,使用全局变量会占用更多的内存(因为其生命期长),不过在计算机配置很高的今天,这个不成为什么问题,除非使用的是巨 ...

  7. POJ Challenge消失之物

    Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...

  8. PHP绘图

    创建图像的一般流程1.设定标头,告诉浏览器你要生成的绘图类型.2.创建一个图像区域,以后的操作都将基于此图像区域.3.在空白图像区域绘制填充背景.4.在背景上绘制图形轮廓输入文本.5.输出最终图形.6 ...

  9. Android 数据存储五种方式

    1.概述 Android提供了5种方式来让用户保存持久化应用程序数据.根据自己的需求来做选择,比如数据是否是应用程序私有的,是否能被其他程序访问,需要多少数据存储空间等,分别是: ① 使用Shared ...

  10. Virtualbox安装USB2.0/3.0

    系统:Ubuntu16.04 软件:Virtualbox5.1 1.打开Virtualbox,不启动虚拟系统. 2.点击设置->USB->启动usb2.0. 3.若发现不能启用,则到官网下 ...