教程集 > jQuery > jquery 教程 > 正文放大镜效果

放大镜效果

发布时间：2023-12-25 编辑：jiaochengji.com

教程集为您提供放大镜效果等资源，欢迎您收藏本站，我们将为您提供最新的放大镜效果资源

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title></title>  <script type="text/javascript">  var ismove = true;  var moveObj;  var scrollObj;  var ok = false;  var left = (parseInt(document.documentElement.clientWidth) - 1004)/2 - 8;  function mousemove(ev)  {  	if (ok)  	{  		moveObj.style.border = "1px solid #000000";  	}  	var x = ev.clientX   document.documentElement.scrollLeft -56;  	if (left > 0)  	{  		x = x - left;  	}  	var y = ev.clientY   document.documentElement.scrollTop - 50;  	if (x < 0)  	{  		x = 0;	  	}  	else if (x > 206)  	{  		x = 206;  	}  	if (y < 0)  	{  		y = 0;  	}  	else if (y > 511)  	{  		y = 511;  	}  	if (ismove && ok)  	{  		moveObj.style.left = x   "px";  		moveObj.style.top = y   "px";   		scrollObj.scrollLeft = x * 4;  		scrollObj.scrollTop = y * 4;  	}  }  function stopMove()  {  	if (ismove)  	{  		ismove = false;  	}  	else  	{  		ismove = true;  	}  }  function loadPage()  {  	moveObj = document.getElementById("moverframe");  	scrollObj = document.getElementById("divZoom");  	scrollObj.scrollLeft = 420;  	scrollObj.scrollTop = 560;  	ok = true;  }  </script>  </head>  <body onload="loadPage();">  <div  style="margin-top:5px;width:600px;float:left;background-color:#F1F1F1;padding:10px;">				  	<div id="MainImg" style="float:left;margin-right:20px;width:275px;height:320px;overflow:hidden;POSITION: relative;" onmousemove="mousemove(event);" oncontextmenu="return false;"><img id="the_Main_Img" src="" width="510" height="385">  		<div id="moverframe" name="moverframe" style="Z-INDEX:10;CURSOR:move;cursor:move;WIDTH:67px;HEIGHT:41px;float:left;POSITION: absolute;left:10px;top:10px;overflow:hidden;" onclick="stopMove();">  		<span  width="65" height="39"></span>  		</div>    </div>  	<div style="width:270px;background-color:#D6D6D6;padding:15px;margin-top:15px;height:165px;">  		<div id="divZoom" style="overflow:hidden;width:268px;height:164px;"><img id="the_Larger_Img" src="" width="1100" height="1280" oncontextmenu="return false;"></div>  	</div>  	  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery图片放大镜插件 magnifier
Photoshop制作放大镜扫视物体动画图片教程
 基于jquery的放大镜效果
 Javascript图片放大镜的实例分析
 photoshop制作MV常见的分散镜面效果教程
 photoshop用镜头校正滤镜制作暗角教程分享
 js放大镜效果一例
 什么是canvas离屏技术？canvas放大镜效果如何实现？
Photoshop制作搞笑的哈哈镜特效表情教程
 jQuery的图片放大器插件 jQzoom

上一篇：文字跟随鼠标跑下一篇：怎么让select为必选项

[关闭]

放大镜效果

最近更新

浏览排行