仿淘宝的图片放大镜_html图片放大镜仿淘宝-CSDN博客

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7410538

上班无聊写了个简单的仿淘宝图片放大镜的问题
以后再碰到这类问题直接复制好了
html代码:

<body>
<div class="all">
    <div class="big">
        <img src="images/00001.jpg" width="160px;" height="160px" />
        <div class="small"></div>
        <div class="show"></div>
    </div>
</div>
</body>

CSS代码：

*{
    padding:0px;
    margin:0px;
    border:0px;}
.all{
    margin:0 auto;
    width:960px;
    }
.big{
    float:left;
    width:160px;
    height:160px;
    border:2px solid #CCC;
    padding:3px;
    margin-top:100px;}
.big .small{
    width:50px;
    height:50px;
    position:absolute;
    top:0px;
    left:300px;
    background:#CFF;
    opacity:0.75;
    display:none;}
.big .show{
    width:275px;
    height:150px;
    padding:3px;
    position:absolute;
    top:100px;
    left:500px;
    display:none;
    background:url(../images/00001.jpg) no-repeat left top;
    border:1px solid #666;}

JQ代码：

var topset=0;
var leftset=0;
$(document).ready(function(e) {
    $(".big").mouseleave(function(){
        $(".small").css({"top":LTY,"left":LTX,"display":"none"});
        $(".show").css("display","none");
    }).mousemove(function(e){
        topset=$(this).offset().top;
        leftset=$(this).offset().left;
        if(e.pageX<185)
            LTX=160;
        else if(e.pageX>301)
            LTX=276;
        else
            LTX=e.pageX-25;
        if(e.pageY<125)
            LTY=100;
        else if(e.pageY>241)
            LTY=221;
        else
            LTY=e.pageY-25;
        $(".small").css({"top":LTY,"left":LTX,"display":"block"});
        
        position_x="-"+Math.round((LTX-160)/160*550)+"px";
        position_y="-"+Math.round((LTY-100)/160*375)+"px";
        pl=position_x+" "+position_y;
        $(".show").css({"display":"block","background-position":pl});
    });
});