- <!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>simplePage - http://www.CodeSnippet.cn</title>
- <style type="text/CSS">
- /* basic */
- body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
- body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
- ul { list-style:none; overflow:hidden; }
- img { border:none; }
- .main{ font:12px/24px "Microsoft YaHei"; width:960px; margin:100px auto; position:relative; text-align:left; }
- .main:after{ content:""; clear:both; display:table; }
- #show{ width:400px; height:400px; overflow:hidden; position:relative; left:0; }
- #show_mark{ position:absolute; top:0; left:0; width:200px; height:100px; background-color:#000; opacity:.5; filter:alpha(opacity=50); cursor:crosshair; border:1px solid #999; display:none; }
- #zoom{ position:absolute; left:410px; top:0; z-index:3; width:400px; height:400px; display:none; overflow:hidden; border:1px solid #eee; }
- #zoom img{ position:absolute; left:0; top:0; }
- </style>
- </head>
- <body>
- <div class="main">
- <div id="show">
- <img src1="http://p1.vanclimg.com/product/0/1/8/0180997/mid/0180997-1j201208211605141213.jpg" id="show_pic" />
- </div>
- <div id="zoom">
- <img src1="http://p1.vanclimg.com/product/0/1/8/0180997/big/0180997-1j201208211605141213.jpg" />
- </div>
- </div>
- <div class="xy">自定义内容</div>
- <script type="text/javascript" src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#show").simpleZoom({
- zoomBox : "#zoom",
- markSize : [200, 200],
- zoomSize : [400, 400],
- zoomImg : [800, 800]
- });
- });
- ;(function($){
- $.fn.simpleZoom = function(options){
- var defs = {
- zoomBox : "#zoomBox", //需要放大的区域
- markSize : [200, 100], //放大镜宽高
- zoomSize : [400, 400], //需要放大的区域宽高
- zoomImg : [800, 800] //需要放大的区域的图片的宽高
- };
- var opt = $.fn.extend({}, defs, options);
- return this.each(function(){
- var markBox = $(this);
- var zoomBox = $(opt.zoomBox);
- var zoom_img = $(opt.zoomBox).find("img");
- var markBoxSize = [markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top];
- var markSize = opt.markSize;
- var zoomSize = opt.zoomSize;
- var zoomImg = opt.zoomImg;
- var mark_ele = "<i id='mark'></i>";
- var mark_css = {position:"absolute", top:0, left:0, width:markSize[0]+"px", height:markSize[1]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)", display:"none", cursor:"crosshair"};
- var show_w = markBoxSize[0]-markSize[0];
- var show_h = markBoxSize[1]-markSize[1];
- //created mark element and add cascading style sheets
- zoomBox.css({width:zoomSize[0]+"px", height:zoomSize[1]+"px"});
- markBox.append(mark_ele);
- $("#mark").css(mark_css);
- markBox.mouseover(function(){
- $("#mark").show();
- zoomBox.show();
- }).mouseout(function(){
- $("#mark").hide();
- zoomBox.hide();
- }).mousemove(function(e){
- var l = e.pageX-markBoxSize[2]-(markSize[0]/2);
- var t = e.pageY-markBoxSize[3]-(markSize[1]/2);
- if(l < 0){
- l = 0;
- }else if(l > show_w){
- l = show_w;
- }
- if(t < 0){
- t = 0;
- }else if(t > show_h){
- t = show_h;
- }
- $("#mark").css({left:l+"px", top:t+"px"});
- var z_x = -(l/show_w)*(zoomImg[0]-zoomSize[0]);
- var z_y = -(t/show_h)*(zoomImg[1]-zoomSize[1]);
- zoom_img.css({left:z_x+"px", top:z_y+"px"});
- });
- });
- }
- })(jQuery);
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/251020136695.html
来源: http://www.codesnippet.cn/detail/251020136695.html