白叔自创放大镜教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.js" type="text/javascript">
</script>
<style type="text/css">

#xiaokuang{position:absolute;
width:100px;
height:100px;
left:0px;
top:0px;
background:rgba(254,238,167,.4);
display:none;
}

#datu{
    position:absolute;
    width:400px;
    height:400px;
    background-color: #999900;
    left:400px;
    top:0px;
    display:none;
    overflow: hidden;
    }
</style>
<script>
$(document).ready(function(){
$("#xiaotu").mouseover(
                       function(){
                         //  $("#xiaokuang").css('display','block');
                         
                           $("#xiaokuang").show();
                           $("#datu").show();//该方法放到mousemove里会出错，不能不停的show
                       }
);


$("#xiaotu").mouseout(
                       function(){
                         //  $("#xiaokuang").css('display','block');
                         
                           $("#xiaokuang").hide();
                           $("#datu").hide();//该方法放到mousemove里会出错，不能不停的show
                       }
);

$("#xiaotu").mousemove(
                       function(e){
                           var x=e.clientX-$("#xiaotu").offset().left-$('#xiaokuang').width()/2;
                           var y=e.clientY-$("#xiaotu").offset().top-$('#xiaokuang').height()/2;
                           $("#xiaokuang").css({left:x+'px',top:y+'px'});
                           
                           
                         
                           
                           
                           
                           
                           if(x<0)
                           $("#xiaokuang").css("left","0px");
                           if(x>($('#xiaoimg').width()-$('#xiaokuang').width()))
                           $("#xiaokuang").css("left",$('#xiaoimg').width()-$('#xiaokuang').width()+"px");
                           if(y<0)
                            $("#xiaokuang").css("top","0px");
                             if(y>($('#xiaoimg').height()-$('#xiaokuang').height()))
                           $("#xiaokuang").css("top",$('#xiaoimg').height()-$('#xiaokuang').height()+"px");
                           //不能直接用div xiaotu 宽度，它没有宽度，调用数值会和屏幕宽度等宽
                           
                            
                             
                             
                             
                               
                       var newx=x*2;   
                       var newy=y*2;  
                       
                       if(newx<0)newx=0;
                       if(newx>($('#datu img').width()-$('#datu').width()))newx=$('#datu img').width()-$('#datu').width();
                       if(newy<0)newy=0;
                       if(newy>($('#datu img').height()-$('#datu').height()))newy=$('#datu img').height()-$('#datu').height();
                       
                       $('#datu img').css("margin-left",-newx+'px');
                       $('#datu img').css("margin-top",-newy+'px');
                       
                       
                        $("#mydebug").html($('#datu img').width()-$('#datu').width()+"  "+"newx"+newx+"newy"+newy+"e.clientX"+e.clientX+"$('#xiaotu').offset().top"+$("#xiaotu").offset().left+"$('#xiaokuang').width()/2"+$('#xiaokuang').width()/2+"$('#xiaotu').width()"+$('#xiaotu').width());
                       
                       }      
                       );

});



//实验证明，只写mouseover不写document ready是不能生效的。 .mouseover括号结尾不写分号也是不能生效的
</script>
</head>

<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="150">&nbsp;</td>
  </tr>
</table>
    <div id="xiaotu" style="position:relative"><img src="s2.jpg" width="400" height="250" id="xiaoimg" /><div id="xiaokuang"></div><div id="datu"><img src="s1.jpg" width="800" height="500"  /></div></div>
    <div id="mydebug" style="height:200px; width:400px;"></div>
</body>
</html>
白叔自创放大镜教程

猜你喜欢
