jquery+css实现简单的窥镜效果
看到有人求这种效果的实现,
一时心血来潮,
用jquery+css实现了一个简单的,
以备后用
<!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=UTF-8"> <title>test</title> <script type="text/javascript" src="jquery-1.3.2.js" ></script> <script type="text/javascript"> function on_mousemove(id) { if (event.button == 1) { if (x != 0) { x = event.clientX - x1; y = event.clientY - y1; //alert(document.getElementById(id)); $("#" + id).css("left", ($("#" + id).position().left + x) + "px"); $("#" + id).css("top", ($("#" + id).position().top + y) + "px"); x1 = event.clientX; y1 = event.clientY; } else { x = x1 = event.clientX; y = y1 = event.clientY; } } else { x = x1 = y = y1 = 0; } return false; } </script> </head> <body style="width:1000px; height:800px;"> <div id="imgObj" style="position:absolute;"><img style="width:600px; height:400px;" src="lilies.jpg"></img></div> <div id="loadDiv" onmousemove="on_mousemove('imgObj');" style="position:absolute; FILTER:alpha(opacity=40); BACKGROUND-COLOR:#666; opacity:0.7; width:800px; height:600px; text-align:center;"> <table style="width:100%; margin-top:100px"> <tr align="center" style="height:100px; width:100%"> <td style="width:40%"></td> <td style="width:20%; background-color: White;"> </td> <td style="width:40%"></td> </tr> </table> </div> </body> </html>发现上面代码只能用于IE浏览器,而且js代码也比较混乱,再整理一个可以兼容浏览器的版本。。。。
<!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=UTF-8"> <title>test</title> <script type="text/javascript" src="jquery-1.6.1.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mousekey = 0; $("#loadDiv").mousedown(function(event){ mousekey = 1; }); $("#loadDiv").mouseup(function(event){ mousekey = 0; }); $("#loadDiv").mousemove(function(event){ $("#viewTd").html(event.pageX + ", " + event.pageY); if (mousekey == 1) { if (x != 0) { x = event.pageX - x1; y = event.pageY - y1; $("#imgObj").css("left", ($("#imgObj").position().left + x) + "px"); $("#imgObj").css("top", ($("#imgObj").position().top + y) + "px"); x1 = event.pageX; y1 = event.pageY; } else { x = x1 = event.pageX; y = y1 = event.pageY; } } else { x = x1 = y = y1 = 0; } return false; }); }); </script> </head> <body style="width:1000px; height:800px;"> <div id="imgObj" style="position:absolute;"><img style="width:600px; height:400px;" src="foren.jpg"></img></div> <div id="loadDiv" style="position:absolute; FILTER:alpha(opacity=40); BACKGROUND-COLOR:#666; opacity:0.7; width:800px; height:600px; text-align:center;"> <table style="width:100%; margin-top:100px"> <tr align="center" style="height:100px; width:100%"> <td style="width:40%"></td> <td id="viewTd" style="width:20%; background-color: White;"> <input type="text" id="txtTest" value="abc"/> </td> <td style="width:40%"></td> </tr> </table> </div> </body> </html>