您的位置：首页 > Web前端 > JQuery

jquery+css实现简单的窥镜效果

2011-09-08 11:54 726 查看

看到有人求这种效果的实现,
一时心血来潮,
用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航