jquery,淘宝商城放大镜效果

来源：互联网发布：vb代码大全编辑：程序博客网时间：2024/06/11 21:59
<!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 charset="utf-8" /><script type="text/javascript" src="file:///D|/Develop/Tomcat6.0.14/webapps/EasyBuy/scripts/jquery.js"></script><style type="text/css"> .newDiv{width:100px;height:100px;border:1px solid #EEE;position:absolute;background:#fff;filter:alpha(opacity=40);opacity:0.4;z-index:2;display:none;cursor:move;}.see_info{width:400px;height:400px;position:absolute;top:0px;left:500px;z-index:2;display:none;}</style></head><body>  <h1>需导入jquery库文件.</h1><div class="thumb"><img class="pic" src="1.jpg" style="max-width:300px;cursor:move;" /><img src="1.jpg" style="display:none;" class="img_hide" />    <div class='newDiv'></div></div>  <!-- 图像详情--><div class="see_info"></div> <script type="text/javascript"> $(function(){$(".thumb").hover(function(){$(".newDiv").show();$(".see_info").show();//获得图片原始图对象var phObj=$(".img_hide");var s=phObj.attr("src");var str =s.split("\\");var img=str.join();$(".see_info").css("background","url("+img+") no-repeat");//获取大图与小图的比例var perX=phObj.width()/$(".pic").width();var perY=phObj.height()/$(".pic").height();$(this).mousemove(function(e){//判断鼠标在图片上的位置var pX=e.pageX-$(this).offset().left;var pY=e.pageY-$(this).offset().top;//获取大图应该的位置var bigX=pX*perX-$(".see_info").width()/2;var bigY=pY*perY-$(".see_info").height()/2;//获取小图的topvar tT=$(this).offset().top;var tL=$(this).css("left");//让鼠标在div中间var top=e.pageY-$(".newDiv").height()/2;//让鼠标在div中间var left=e.pageX-$(".newDiv").width()/2;//最大高度var div_max_top=parseInt($(this).offset().top)+parseInt($(this).height())-$(".newDiv").height();//最低高度var div_min_top=$(this).offset().top;//最大宽度var div_max_left=parseInt($(this).offset().left)+parseInt($(this).width())-$(".newDiv").width();//最小宽度var div_min_left=$(this).offset().left;if(top<=div_min_top){top=div_min_top;}if(top>=div_max_top){top=div_max_top;}if(left<=div_min_left){left=div_min_left;}if(left>=div_max_left){left=div_max_left;}//设置鼠标图div的位置$(".newDiv").css({"top":+top+"px","left":+left+"px"});//设置大图图位置$(".see_info").css({"background-position":+-bigX+"px"+" "+-bigY+"px"});});}, function(){//隐藏div$(".see_info").hide();$(".newDiv").hide();}); });</script></div></body></html>
引用 http://www.zhjie.net