方法一

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		*{
  8. 			margin:0;
  9. 			padding: 0;
  10. 		}
  11. 		.box{
  12. 			width: 400px;
  13. 			height: 250px;
  14. 		}
  15. 		.box0{
  16. 			position: absolute;
  17. 			width: 100px;
  18. 			height: 100px;
  19. 			background:rgba(255,255,0,.4);
  20. 		}
  21. 		img{
  22. 			width: 400px;
  23. 			height: 250px;
  24. 		}
  25. 		.box1{
  26. 			position: absolute;
  27. 			left: 450px;
  28. 			top:10px;
  29. 			width: 200px;
  30. 			height:200px;
  31. 			overflow: hidden;
  32. 		}
  33. 		.box1 img{
  34. 			width: 800px;
  35. 			height: 500px;
  36. 			position: absolute;
  37. 		}
  38. 	</style>
  39. </head>
  40. <body>
  42. 	<div class="box" id="box">
  43. 	<!--遮罩-->
  44. 		<div class="box0" id="box0" style="display:none"></div>
  45. 		<img src="./images/0.jpg" alt="">
  46. 	</div><!--左边盒子-->
  47. 	<div class="box1">
  48. 		<img src="./images/0.jpg" alt="" id="rightImg" style="display:none">
  49. 	</div><!--右边盒子-->
  51. </body>
  52. </html>
  53. <script>
  54. 	var box =document.getElementById("box");
  55. 	var box0=document.getElementById("box0");
  56. 	var rightImg=document.querySelector("#rightImg")
  57. 	box.onmouseover=function(){
  58. 		box0.style.display="block";
  59. 		rightImg.style.display="block";
  61. 		//鼠标移动
  62. 		box.onmousemove=function(ev){
  63. 			var e = ev||window.event;
  64. 			box0.style.left=(e.clientX-50)+"px";
  65. 			box0.style.top=(e.clientY-50)+"px";
  66. 			if(box0.offsetLeft<0){
  67. 				box0.style.left=0+"px";
  68. 			}
  69. 			if(box0.offsetLeft>300){
  70. 				box0.style.left=300+"px";
  71. 			}
  72. 			if(box0.offsetTop<0){
  73. 				box0.style.top=0+"px";
  74. 			}
  75. 			if(box0.offsetTop>150){
  76. 				box0.style.top=150+"px";
  77. 		}
  78. 		rightImg.style.left=(-2*(parseInt(box0.style.left)))+"px";
  79. 		rightImg.style.top=(-2*(parseInt(box0.style.top)))+"px";
  80. 	}
  81. 	box0.onmouseout=function(){
  82. 		box0.style.display="none";
  83. 		rightImg.style.display="none";
  84. 	}
  85. }
  86. </script>

方法二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>放大镜</title>
  6. 	<style>
  7. 		#zoom{
  8. 			position: relative;
  9. 			width:480px;
  10. 			height:270px;
  11. 			border:1px solid #ccc;
  12. 			cursor:crosshair;
  13. 		}
  15. 		#zoomJing{
  16. 			position: absolute;
  17. 			display:none;
  18. 			width:100px;
  19. 			height:100px;
  20. 			left:0;
  21. 			top:0;
  22. 			background-color:orange;
  23. 			opacity:.5;
  24. 			filter:alpha(opacity=50);
  25. 		}
  27. 		#bigZoom{
  28. 			position: absolute;
  29. 			width:400px;
  30. 			height:400px;
  31. 			overflow:hidden;
  32. 			display:none;
  33. 		}
  34. 	</style>
  35. </head>
  36. <body>
  37. 	<div id="zoom">
  38. 		<img src="./images/Meinv014.jpg" alt="" width="480" height="270">
  40. 		<div id="zoomJing"></div>
  41. 	</div>
  43. 	<div id="bigZoom">
  44. 		<img src="./images/Meinv014.jpg" alt="">
  45. 	</div>
  47. 	<script>
  48. 		var zoom = document.getElementById("zoom");
  49. 		var bigZoom = document.getElementById("bigZoom");
  50. 		var zoomJing = document.getElementById("zoomJing");
  52. 		//绑定事件 鼠标
  53. 		zoom.onmouseover = function(){
  55. 			//显示bigZoom
  56. 			bigZoom.style.display = "block";
  57. 			zoomJing.style.display = "block";
  59. 			//确定bigZoom的位置
  60. 			bigZoom.style.left = zoom.getBoundingClientRect().right + 10 + "px";
  61. 			bigZoom.style.top = zoom.getBoundingClientRect().top + "px";
  63. 			// 鼠标移动事件
  64. 			this.onmousemove = function(ev){
  65. 				//计算 鼠标在zoom上的坐标
  66. 				var e = ev || window.event;
  67. 				var x = e.clientX - this.getBoundingClientRect().left;
  68. 				var y = e.clientY - this.getBoundingClientRect().top;
  70. 				//计算zoomJing的位置
  71. 				var zX = Math.min(Math.max(x - 50, 0), 380);
  72. 				var zY = Math.min(Math.max(y - 50, 0), 170);
  74. 				//确定zoomJing的位置
  75. 				zoomJing.style.left = zX + "px";
  76. 				zoomJing.style.top = zY + "px";
  78. 				//改变放大图
  79. 				bigZoom.scrollLeft = zX * 4;
  80. 				bigZoom.scrollTop = zY * 4;
  82. 			}
  83. 		}
  84. 		zoom.onmouseout = function(){
  85. 			zoomJing.style.display = "none";
  86. 			bigZoom.style.display = "none";
  87. 		}
  89. 	</script>
  90. </body>
  91. </html>

Javascript制作放大镜的更多相关文章

  1. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  2. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  3. JavaScript之放大镜效果2

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

  4. JavaScript之放大镜效果

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

  5. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

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

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

  7. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  8. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript制作时钟特效

    需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...

随机推荐

  1. [USACO19JAN]Cow Poetry

    题面 Solution: 这是一道很好的dp题. 一开始看不懂题面没有一点思路,看了好久题解才看懂题目... \(y[i]\) 为第 \(i\) 个词结尾,\(l[i]\) 为第 \(i\) 个词长度 ...

  2. URAL 1736 Chinese Hockey（网络最大流）

    Description Sergey and Denis closely followed the Chinese Football Championship, which has just come ...

  3. 团队作业4——第一次项目冲刺（Alpha版本)-第二篇

    项目冲刺——第二阶段 度过了敏捷冲刺,各个成员积极汇报各自的工作.好了,着手下一步规划! Mission 团队成员 任务 郭达  实现PHP后台的答题判分查看正确率 刘德培  编写博客 石浩洋  实现 ...

  4. pta指针作业

    #PTA实验作业 6-1 本题pta提交列表 设计思路 本题是一道简单的指针程序题,两个数已经分别被指针定义,只要把用其指针把二者加在一起和减去即可 调试过程 本题无调试过程 代码截图 6-2  1. ...

  5. [剑指Offer] 29.最小的K个数

    [思路1]全排序(快排)之后取出前K个数.O(K+nlogn) class Solution { public: vector<int> GetLeastNumbers_Solution( ...

  6. Delphi 7学习开发控件(续)

    继上次我们学习开发一个简单的画线控件后,基本的制作控件步骤已经清楚了,这次我们继续加深学习控件的制作.我们打开Delphi 7创建一个应用程序,拖动LineTo控件到窗体上,仔细看左边的对象设计器,可 ...

  7. 日期时间选择器datetimepicker.js

    在做项目中,往往会遇到需要用户输入2014-07-19 09:55:53这样的格式的数据.就是典型的年月日时分秒这样的格式.这个时候,使用datetimepicker会比较简单. DateTimePi ...

  8. hdu 1286 找新朋友 (欧拉函数)

    找新朋友 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. P2124 奶牛美容

    题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 6 16 ................ ..XXXX....XXX... ...XXXX....XX... .XXXX ...

  10. [LOJ#2553][CTSC2018]暴力写挂

    [LOJ#2553][CTSC2018]暴力写挂 试题描述 temporaryDO 是一个很菜的 OIer .在 4 月,他在省队选拔赛的考场上见到了<林克卡特树>一题,其中 \(k = ...