1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>放大镜</title>
  6. 	<style type="text/css">
  7. 	*{margin:0;padding:0;}
  8. 	.container{width: 200px;height: 200px;padding: 5px;border:1px solid #CCC;position: relative;left: 50px;top: 50px;}
  9. 	.container .small_pic{width: 200px;height: 200px;background: #ccc;position: relative;}
  10. 	.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;}
  11. 	.container .mask{width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;background: red;filter:alpha(opacity: 0);opacity: 0;}
  12. 	.container .big_pic{position: absolute;top: -1px;left: 215px;width: 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;}
  13. 	.container img{position: absolute;top: 0;left: 0;}
  14. 	</style>
  15. </head>
  16. <body>
  17. 	<div class="container"  id="div1">
  18. 		<div class="small_pic">
  19. 			<span class="mask"></span>
  20. 			<span class="float_layer"></span>
  21. 			<img src="http://b.hiphotos.baidu.com/image/w%3D310/sign=6c8629c441540923aa69657fa259d1dc/b812c8fcc3cec3fd1d347092de88d43f869427cb.jpg" />
  22. 		</div>
  23. 		<div class="big_pic">
  24. 			<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=c53e905c4f10b912bfc1f0fff3fcfcb5/83025aafa40f4bfbf3c249b30b4f78f0f63618c2.jpg" />
  25. 		</div>
  26. 	</div>
  27.  
  28. 	<script type="text/javascript">
  29. 	var util = {			//获取类名
  30. 		getByClass : function(oParent,oClass){
  31. 			var oEle = oParent.getElementsByTagName('*');
  32. 			var oTemp = [];
  33. 			for(var i = 0 ; i < oEle.length ; i++){
  34. 				if(oEle[i].className == oClass){
  35. 					oTemp.push(oEle[i]);
  36. 				}
  37. 			}
  38. 			return oTemp;
  39. 		}
  40. 	}
  41. 	window.onload = function(){
  42. 		var oDiv = document.getElementById('div1');
  43. 		var oMask = util.getByClass(oDiv,'mask')[0];
  44. 		var oFloat = util.getByClass(oDiv,'float_layer')[0];
  45. 		var oBig = util.getByClass(oDiv,'big_pic')[0];
  46. 		var oSamll = util.getByClass(oDiv,'small_pic')[0];
  47. 		var oImg = oBig.getElementsByTagName('img')[0];
  48. 		oMask.onmouseover = function(){
  49. 			oFloat.style.display = "block";
  50. 			oBig.style.display = "block";
  51. 		}
  52.  
  53. 		oMask.onmouseout = function(){
  54. 			oFloat.style.display = "none";
  55. 			oBig.style.display = "none";
  56. 		}
  57.  
  58. 		oMask.onmousemove = function(e){
  59. 			var e = e || window.event;
  60.  
  61. 			var oLeft = e.clientX - oDiv.offsetLeft - oSamll.offsetLeft - oFloat.offsetWidth / 2;		//灰色遮罩层偏移量
  62. 			var oTop = e.clientY - oDiv.offsetTop - oSamll.offsetTop - oFloat.offsetHeight / 2;
  63. 			if(oLeft < 0){			//边缘判断
  64. 				oLeft = 0;
  65. 			}else if(oLeft > oMask.offsetWidth - oFloat.offsetWidth){
  66. 				oLeft = oMask.offsetWidth - oFloat.offsetWidth;
  67. 			}
  68. 			if(oTop < 0){
  69. 				oTop = 0;
  70. 			}else if(oTop > oMask.offsetHeight - oFloat.offsetHeight){
  71. 				oTop = oMask.offsetHeight - oFloat.offsetHeight;
  72. 			}
  73. 			oFloat.style.left = oLeft + 'px';
  74. 			oFloat.style.top = oTop + 'px';
  75.  
  76. 			var oPercentX = oLeft / (oMask.offsetWidth - oFloat.offsetWidth);			//两图比例计算
  77. 			var oPercentY = oTop / (oMask.offsetHeight - oFloat.offsetHeight);
  78.  
  79. 			oImg.style.left = -oPercentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px';		//最终大图所处位置
  80. 			oImg.style.top = -oPercentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';
  81. 		}
  82. 	}
  83. 	</script>
  84. </body>
  85. </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. Openstack+Kubernetes+Docker微服务实践之路--弹性扩容

    服务上线就要顶的住压力.扛的住考验,不然挨说的还是我们这帮做事的兄弟,还记得上图这个场景吗 老办法是服务集群部署,但总归有个上限,之前跟阿里合作的时候他们有个弹性计算可以通过设置CPU的阀值来动态扩展 ...

  2. JAVA 1.1

    1. JASE : J2SE 这个就是我们现在在学的东西,他是一切Java的核心基础 JAME :J2ME : 他是Java的一个微型版,主要用来做移动开发 JAEE :J2EE Java企业版本,主 ...

  3. Android复制粘贴文字

    /** * 实现文本复制功能 * * @param content */ public static void copy(String content, Context context) {// 得到 ...

  4. 狗汪汪玩转无线电 -- GPS Hacking

    狗汪汪玩转无线电 -- GPS Hacking Kevin2600 · 2015/12/09 10:12 0x00 序 GPS Hacking 在过去几年的安全会议上一直都是很受关注的议题. 但往往因 ...

  5. javascript学习内容--改变样式、取消设置、显示内容、隐藏内容

    <head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...

  6. HTML5 十大新特性(四)——Canvas绘图

    H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

  7. Java学习之Iterator(迭代器)的一般用法 （转）

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因为创建它的代价 ...

  8. Android应用中MVP开发模式

    所谓MVP(Model-View-Presenter)模式.是将APP的结构分为三层: view - UI显示层 view 层主要负责: 提供UI交互 在presenter的控制下修改UI. 将业务事 ...

  9. Extjs 源码组成（4.0.7）

    (function(){})()形式的自执行,构建Ext对象(0~584) 1  设置全局对象EXt:global.Ext = {}, 2 实现了Ext对象面向对象编程的基础方法,如,apply,ex ...

  10. 收藏夹里的js

    释放右键 javascript:(function(){var doc=document;var bd=doc.body;bd.onselectstart=bd.oncopy=bd.onpaste=b ...