jQuery放大镜

 







<!doctype html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reading glass</title>
    <script src="jquery10.min.js"></script>
    <style>
        .main_img{ height: 150px; width: 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;}
        .main_img:hover{}
        .main_img img{height: 100%;width: 100%;}
        .show_img{ height:400px; width: 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; }
        .show_img img{position: absolute;}
        .move_img{position: absolute; border: 1px solid #ccc; }
        .move_img div{opacity: 0.4; background-color: #ccc; width: 100%; height: 100%}
    </style>
</head>
<body>
    <div class = "main_img">

        <img src="1.jpg" alt="">

        <div class = 'move_img'>
            <div></div>
        </div>

    </div>

    <div class = "show_img">
        <img src="1.jpg" alt="">
    </div>

    
</body>
</html>
<script>
    /*
        功能：    图片放大镜功能
        方法名：    readingGlass
        参数：    obj -> 主图div对象
                show_obj -> 显示div对象
                move_obj -> 主图里面的移动div对象
    */

    function readingGlass(obj,show_obj,move_obj){

        function move(e){
            
        //鼠标的坐标
            var mxx = e.clientX;
            var    myy = e.clientY;

        //主图片左边与顶部距浏览器左边和顶部的距离
            var    ox = obj.offset().left;
            var oy = obj.offset().top;

        //鼠标在主主图片里的坐标
            var dx = mxx - ox;
            var dy = myy - oy;
        //主图片框的内部的宽高
            var ow = obj.width();
            var oh = obj.height();
        //移动比例
            var ddx = -dx/ow;
            var ddy = -dy/oh;
        //显示容器的宽高
            var w_show= show_obj.width();
            var h_show= show_obj.height();
        //显示图片的宽高
            var w_show_img = show_obj.find("img").width();
            var h_show_img = show_obj.find("img").height();

    
            

        //小盒子的位置
            smx = dx-(w_show/w_show_img )*ow/2;
            smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop();
        //显示盒子中图片的位置
            move_x = ddx*w_show_img+w_show/2;
            move_y = ddy*h_show_img+h_show/2;
        //小盒子位置越界与显示越界判定
            if(smx<=0){
                smx = 0;
                move_x = 0;
            }else if(smx>=(ow-(w_show/w_show_img )*ow)){
                smx = ow-(w_show/w_show_img )*ow;
                move_x = -w_show_img+w_show;
            }

            if(smy<=0){
                smy = 0;
                move_y = 0;
            }else if(smy>=(oh-(h_show/h_show_img )*oh)){
                smy = oh-(h_show/h_show_img )*oh;
                move_y = -h_show_img+h_show;
            }

        //小盒子的宽高
            move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh});
        // 小盒子的位置设定
            move_obj.animate({"left":smx,"top":smy},0);

        //显示盒子中图片的位置

            show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0);


            
        }
        


        obj.mouseenter(function(){
            $(document).bind('mousemove',move)
            
            move_obj.show(0);
            show_obj.show(400);
                    
            return false;        

        }).mouseleave(function(){
            move_obj.hide(200);
            show_obj.hide(200);
            $(document).unbind('mousemove',move)
            return false;

        })
    
}    
    readingGlass($(".main_img"),$(".show_img"),$(".move_img"));

</script>






源码下载




 


<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Reading glass</title><script src="jquery10.min.js"></script><style>.main_img{ height: 150px; width: 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;}.main_img:hover{}.main_img img{height: 100%;width: 100%;}.show_img{ height:400px; width: 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; }.show_img img{position: absolute;}.move_img{position: absolute; border: 1px solid #ccc; }.move_img div{opacity: 0.4; background-color: #ccc; width: 100%; height: 100%}</style></head><body><div class = "main_img">
<img src="1.jpg" alt="">
<div class = 'move_img'><div></div></div>
</div>
<div class = "show_img"><img src="1.jpg" alt=""></div>
</body></html><script>/*功能：图片放大镜功能方法名：readingGlass参数：obj -> 主图div对象show_obj -> 显示div对象move_obj -> 主图里面的移动div对象*/
function readingGlass(obj,show_obj,move_obj){
function move(e){//鼠标的坐标var mxx = e.clientX;varmyy = e.clientY;
//主图片左边与顶部距浏览器左边和顶部的距离varox = obj.offset().left;var oy = obj.offset().top;
//鼠标在主主图片里的坐标var dx = mxx - ox;var dy = myy - oy;//主图片框的内部的宽高var ow = obj.width();var oh = obj.height();//移动比例var ddx = -dx/ow;var ddy = -dy/oh;//显示容器的宽高var w_show= show_obj.width();var h_show= show_obj.height();//显示图片的宽高var w_show_img = show_obj.find("img").width();var h_show_img = show_obj.find("img").height();

//小盒子的位置smx = dx-(w_show/w_show_img )*ow/2;smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop();//显示盒子中图片的位置move_x = ddx*w_show_img+w_show/2;move_y = ddy*h_show_img+h_show/2;//小盒子位置越界与显示越界判定if(smx<=0){smx = 0;move_x = 0;}else if(smx>=(ow-(w_show/w_show_img )*ow)){smx = ow-(w_show/w_show_img )*ow;move_x = -w_show_img+w_show;}
if(smy<=0){smy = 0;move_y = 0;}else if(smy>=(oh-(h_show/h_show_img )*oh)){smy = oh-(h_show/h_show_img )*oh;move_y = -h_show_img+h_show;}
//小盒子的宽高move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh});// 小盒子的位置设定move_obj.animate({"left":smx,"top":smy},0);
//显示盒子中图片的位置
show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0);

}

obj.mouseenter(function(){$(document).bind('mousemove',move)move_obj.show(0);show_obj.show(400);return false;
}).mouseleave(function(){move_obj.hide(200);show_obj.hide(200);$(document).unbind('mousemove',move)return false;
})}readingGlass($(".main_img"),$(".show_img"),$(".move_img"));
</script>






            

            
posted @ 
2018-08-02 22:02 
喵星人~ 
阅读(199) 
评论(0) 
 
收藏 
举报