编写类似VANCL产品图片放大的效果源码_Javascript教程_H5之家

教程网3月27日整理

在本地调试IE中没问题，怎么上传了在IE里就不起作用了？？奇怪。FF中没问题。
(点"运行代码"按钮后,待页面打开完,再按F5刷新一下页面)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Clip Test</title>
    <style type="text/css">
        body
        {
            margin:0;
            padding:15px;
        }
    .clip
    {
        position: relative;
        height: 499px;
        width: 333px;
        border: solid 1px #ccc;
        cursor:default;
        background:#fff;
    }
    .clip div {
        position: absolute;
        clip: rect(0px 60px 100px 0px);
        width:333px;
        height:499px;
        background:url() no-repeat top left;
        cursor:default;
    }
    .pic
    {
        position: absolute;
        height: 499px;
        width: 333px;
        top:15px;
        left:353px;
        border: solid 1px #ccc;
        background-image:url();
        background-repeat: no-repeat;
        background-position:0px 0px;
    }
    </style>
    <script type="text/javascript" language="javascript" src=""></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#mov").mousemove(function(event) { MoveRect(event); });
        });
        var moverW = 60;
        var moverH = 100;
        function MoveRect(event) {
            var x = event.clientX - 15;
            var y = event.clientY - 15;
            var top = y - moverH / 2;
            var right = x + moverW / 2;
            var bottom = y + moverH / 2;
            var left = x - moverW / 2;
            if (top <= 0) {
                top = 0;
                bottom = moverH;
            }
            if (left <= 0) {
                left = 0;
                right = moverW;
            }
            if (top >= 499 - moverH) {
                top = 499 - moverH;
                bottom = top + moverH;
            }
            if (left >= 333 - moverW) {
                left = 333 - moverW;
                right = left + moverW;
            }
            $("#img").css("clip", "rect(" + top.toString() + "px " + right.toString() + "px " + bottom.toString() + "px " + left.toString() + "px)");
            $("#posi").html(x + ":" + y + " - " + $("#img").css("clip"));
            $("#pic").css("background-position", (0 - left * 2.5 * 2) + "px " + (0 - top * 2.5 * 2) + "px");
        }
        function SetBG(bg) {
            $("#mov").css("background", bg);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="clip" id="mov">
        <div id="img"></div>
    </div>
    <div class="pic" id="pic"></div>
    <div id="posi"></div>
    <div>
        背景：
        <a href="javascript:void(0);" onclick="javascript:SetBG('#fff');">无</a>
        <a href="javascript:void(0);" onclick="javascript:SetBG('url() no-repeat top left');">有</a>
        <a href="javascript:void(0);" onclick="javascript:SetBG('url() no-repeat top left');">模糊</a>
    </div>
    </form>
</body>
</html>

编写类似VANCL产品图片放大的效果 源码_Javascript教程

编写类似VANCL产品图片放大的效果源码_Javascript教程