【原】Javascript 实现的放大效果

发表于 2010 年 11 月 21 日由 pswzyu

原创啊，哈哈，实现类似淘宝网上查看宝贝的效果，鼠标移上去看到放大效果

<html>
<head>
    <title>挑战放大效果</title>
    <script type="text/javascript" src="./script.js">
    </script>
    <style type="text/css">
        #container
        {
 
        }
        #small_img
        {
            display : inline;
            float : left;
            border : solid 5px;
            width : 320px;
            height : 240px;
            z-index : 0;
        }
        #big_img
        {
            display : none;
            z-index : -1;
            overflow : hidden;
        }
    </style>
</head>
<body>
    当前鼠标坐标为：
    X：<span id="mp_x"></span>
    Y：<span id="mp_y"></span>
    <h1>挑战一下写一个图像放大的效果</h1>
    <div id="container">
    <div id="small_img" onmousemove="ChangeBigImg(event)" onmouseout="hideBigImg()">
        <img id="img" alt="小图像" src="android.jpg" width="320px" height="240px"></img>
    </div>
    <div id="big_img">
        <img alt="放大图像" src="android.jpg"></img>
    </div>
    </div>
 
</body>
</html>
 
window.onload = init;
 
function getX(obj){
    var ParentObj=obj;
    var left=obj.offsetLeft;
    while(ParentObj=ParentObj.offsetParent){
        left+=ParentObj.offsetLeft;
    }
    return left;
}
 
function getY(obj){
    var ParentObj=obj;
    var top=obj.offsetTop;
    while(ParentObj=ParentObj.offsetParent){
        top+=ParentObj.offsetTop;
    }
    return top;
}
function init()
{
    window.con_left = document.getElementById("container").offsetLeft;
    window.con_top = document.getElementById("container").offsetTop;
}
function ChangeBigImg(event)
{
    var top,left,oDiv;
    oDiv=document.getElementById("small_img");
    top=getY(oDiv);
    left=getX(oDiv);
    x = event.clientX-left;
    y = event.clientY-top;
    document.getElementById("mp_x").innerHTML = x + "px";
    document.getElementById("mp_y").innerHTML = y + "px";
    document.getElementById("big_img").style.display = "inline";
    document.getElementById("big_img").style.position = "absolute";
    document.getElementById("big_img").style.clip = "rect(" + (y-75)*2 + "px " + (x+75)*2 + "px " + (y+75)*2 + "px " + (x-75)*2 + "px)";
    document.getElementById("big_img").style.left = 500 + con_left - x*2 + "px";
    document.getElementById("big_img").style.top = 150 + con_top - y*2 + "px";
}
function hideBigImg()
{
    document.getElementById("big_img").style.display = "none";
}

此条目发表在 HTML/Javascript/CSS 分类目录。将固定链接加入收藏夹。

发表评论取消回复