admin管理员组

文章数量:1516870

上班无聊  写了个简单的仿淘宝图片放大镜的问题
以后再碰到这类问题 直接复制好了
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});
    });
});



本文标签： 淘宝购物编程代码

版权声明：本文标题：淘宝购物新体验：图片放大镜功能让你看得更清晰！ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1771506634a3266297.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。