点击放大图片或者文字

在鑫旭大神博客，看到这个插件的效果，觉得效果真的好好啊，佩服佩服呀。

不禁觉得大神的Css功底真的很深。再次佩服。

贴出研究过的插件源码，里面注释都是我自己琢磨的，如有不同意见欢迎探讨。

点击看效果demo

jQuery.fn.fancyZoom = function(options){
  
  var options   = options || {}; //初始化参数
  var directory = options && options.directory ? options.directory : 'images'; //默认是方法图片的标志
  var zooming   = false; //用来判断此时此刻是否有zooming在展示

	//没有zoom就建造一个插入
  if ($('#zoom').length == 0) {
    var html = '<div class="round_shade_box" id="zoom"> 
					<div class="round_shade_top"> 
						<span class="round_shade_topleft"> </span> 
						<span class="round_shade_topright"> </span> 
					</div> 
					<div class="round_shade_centerleft"> 
						<div class="round_shade_centerright"> 
							<div class="round_shade_center" id="zoom_content"> </div> 
						</div> 
					</div> 
					<div class="round_shade_bottom"> 
						<span class="round_shade_bottomleft"> </span> 
						<span class="round_shade_bottomright"> </span> 
					</div> 
					<a href="#close" class="round_box_close" id="zoom_close">关闭</a> 
				</div>';
                
    $('body').append(html);
    
    $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();}); //点击除了zoom其他地方则隐藏
    $(document).keyup(function(event){
        if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
    });
    
    $('#zoom_close').click(hide); //给关闭按钮赋予点击事件来隐藏zoom
  }
  
  var zoom          = $('#zoom');
  var zoom_close    = $('#zoom_close');
  var zoom_content  = $('#zoom_content');
	
	//这里的this指向调用fancyZoom的$对象
  this.each(function(i) {

		//$对象里所有指向到的放大div先隐藏，然后分别赋予点击事件来展示
    $($(this).attr('href')).hide();
    $(this).click(show);
  });
  $('#zoom_close').click(hide); //关闭按钮赋予点击事件来隐藏
  return this; //返回this进行链式调用
	
	//点击了调用了fancyZoom的元素
  function show(e) {
    if (zooming) return false; //假如zooming = true,则不调用
		zooming         = true; //先改变zooming的值

		//获取指向元素的输入参数长宽值，放大图片的情况下zoom_width， zoom_height为undefined
		var content_div = $($(this).attr('href'));
  		var zoom_width  = options.width;
		var zoom_height = options.height;
		
		//获取页面长度宽度和浏览器滚动长度高度
		var width       = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
		var height      = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
		var x           = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
		var y           = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
		var window_size = {'width':width, 'height':height, 'x':x, 'y':y} //保存以上四个参数
		
		//放大图片的情况下对指向元素长宽各增加40
		var width              = (zoom_width || content_div.width()) + 40;
		var height             = (zoom_height || content_div.height()) + 40;
		var d                  = window_size;
		
		// ensure that newTop is at least 0 so it doesn't hide close button
		var newTop             = Math.max((d.height/2) - (height/2) + y, 0); //获取绝对定位的top，
		var newLeft            = (d.width/2) - (width/2); //获取绝对定位的left
		var curTop             = e.pageY; //获取点击事件对象现在的鼠标位置
		var curLeft            = e.pageX;
		
		//关闭按钮赋予相关属性
		zoom_close.attr('curTop', curTop);
		zoom_close.attr('curLeft', curLeft);
		zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');
		
		//先隐藏，在赋予样式，top&left赋予点击事件对象现在的鼠标位置
    $('#zoom').hide().css({
			position	: 'absolute',
			top				: curTop + 'px',
			left			: curLeft + 'px',
			width     : '1px',
			height    : '1px'
		});
    
    zoom_close.hide();
    
    if (options.closeOnClick) {
      $('#zoom').click(hide);
    }
    
	if (options.scaleImg) {
		zoom_content.html(content_div.html()); //指向元素的innerHTML复制给zoom content
		$('#zoom_content img').css('width', '100%'); //zoom content里面的img长度100%
		} else {
		  zoom_content.html(''); //不缩放图片则直接空html
	}
		
	//最后展示zoom，有个动画效果
    $('#zoom').animate({
      top     : newTop + 'px',
      left    : newLeft + 'px',
      opacity : "show",
      width   : width,
      height  : height
    }, 500, null, function() {

			//动画结束回调，缩放图片的情况复制html
			//展示关闭按钮
			//恢复初始值zooming
      if (options.scaleImg != true) {
    		zoom_content.html(content_div.html());
  		}
			zoom_close.show();
			zooming = false;
    })
    return false;
  }
  
  function hide() {
    if (zooming) return false;
		zooming         = true;
	  $('#zoom').unbind('click');
		
		if (zoom_close.attr('scaleImg') != 'true') {
  		zoom_content.html('');
		}
		zoom_close.hide();
		$('#zoom').animate({
		  top     : zoom_close.attr('curTop') + 'px',
		  left    : zoom_close.attr('curLeft') + 'px',
		  opacity : "hide",
		  width   : '1px',
		  height  : '1px'
		}, 500, null, function() {
			
		  if (zoom_close.attr('scaleImg') == 'true') {
				zoom_content.html('');
			}
				zooming = false;
		});
		return false;
	  }
  
}

　demo源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery-单击文字或图片内容放大显示且含圆角投影效果</title>
    <style type="text/css">
        /*自适应圆角投影*/

        .round_shade_box {
             1px;
            height: 1px;
            font-size: 0;
            display: none;
            _background: white;
            _border: 1px solid #cccccc;
        }

        .round_shade_top {
            margin: 0 12px 0 10px;
            background: url(../image/zxx_round_shade.png) repeat-x -20px -40px;
            _background: white;
            zoom: 1;
        }

        .round_shade_topleft {
             11px;
            height: 10px;
            background: url(../image/zxx_round_shade.png) no-repeat 0 0;
            _background: none;
            float: left;
            margin-left: -11px;
            position: relative;
        }

        .round_shade_topright {
             12px;
            height: 10px;
            background: url(../image/zxx_round_shade.png) no-repeat -29px 0;
            _background: none;
            float: right;
            margin-right: -12px;
            position: relative;
        }

        .round_shade_centerleft {
            background: url(../image/zxx_round_shade.png) no-repeat 0 -1580px;
            _background: none;
        }

        .round_shade_centerright {
            background: url(../image/zxx_round_shade.png) no-repeat right -80px;
            _background: none;
        }

        .round_shade_center {
            font-size: 14px;
            margin: 0 12px 0 10px;
            padding: 10px;
            background: white;
            letter-spacing: 1px;
            line-height: 1.5;
        }

        .round_shade_bottom {
            margin: 0 12px 0 11px;
            background: url(../image/zxx_round_shade.png) repeat-x -20px bottom;
            _background: white;
            zoom: 1;
        }

        .round_shade_bottomleft {
             11px;
            height: 10px;
            background: url(../image/zxx_round_shade.png) no-repeat 0 -30px;
            _background: none;
            float: left;
            margin-left: -11px;
            position: relative;
        }

        .round_shade_bottomright {
             12px;
            height: 10px;
            background: url(../image/zxx_round_shade.png) no-repeat -29px -30px;
            _background: none;
            float: right;
            margin-right: -12px;
            position: relative;
        }

        .round_shade_top:after,
        .round_shade_bottom:after,
        .zxx_zoom_box:after {
            display: block;
            content: ".";
            height: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .round_box_close {
            padding: 2px 5px;
            font-size: 12px;
            color: #ffffff;
            text-decoration: none;
            border: 1px solid #cccccc;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            background: #000000;
            opacity: 0.8;
            filter: alpha(opacity=80);
            position: absolute;
            right: -5px;
            top: -5px;
        }

        .round_box_close:hover {
            opacity: 0.95;
            filter: alpha(opacity=95);
        }
        /*自适应圆角投影结束*/

        .zxx_zoom_left {
             45%;
            /* float:left;  */
            margin-top: 20px;
            /* border-right:1px solid #dddddd; */
        }

        .zxx_zoom_left h4 {
            margin: 5px 0px 15px 5px;
            font-size: 1.1em;
        }

        .small_pic {
            display: inline-block;
             48%;
            /* height:150px;  */
            font-size: 120px;
            text-align: center;
            *display: inline;
            zoom: 1;
            vertical-align: middle;
        }

        .small_pic img {
            padding: 3px;
            background: #ffffff;
            border: 1px solid #cccccc;
            vertical-align: middle;
        }

        .zxx_zoom_right {
             50%;
            /* float:left;  */
            margin-top: 20px;
            /* padding-left:2%; */
        }

        .zxx_zoom_right h4 {
            margin: 5px 0px;
            font-size: 1.1em;
        }

        .zxx_zoom_right p.zxx_zoom_word {
            line-height: 1.5;
            font-size: 1.05em;
            letter-spacing: 1px;
            margin: 0 0 35px;
            padding-top: 5px;
        }

        .biggerImg {
             400px;
            height: 330px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="../js/content_zoom.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div.small_pic a').fancyZoom({
                scaleImg: true,
                closeOnClick: true
            });
            $('#zoom_word_1').fancyZoom({
                 400,
                height: 200
            });
            $('#zoom_word_2').fancyZoom();
            $('#zoom_flash').fancyZoom();
        });
    </script>
</head>

<body>

    <h3 class="zxx_title">jQuery-单击文字或图片内容放大显示且含圆角投影效果</h3>
    <div class="zxx_main_con fix">
        <div class="zxx_zoom_left">
            <h4>图片的放大</h4>
            <div class="small_pic">
                <a href="#pic_one">
                    <img src="../../pic&wordLineInMiddle/images/img2.jpg" />
                </a>
            </div>
            <div class="small_pic">
                <a href="#pic_two">
                    <img src="../../pic&wordLineInMiddle/images/img4.jpg" />
                </a>
            </div>
            <div class="small_pic">
                <a href="#pic_three">
                    <img src="../../pic&wordLineInMiddle/images/img3.jpg" />
                </a>
            </div>
            <div class="small_pic">
                <a href="#pic_four">
                    <img src="../../pic&wordLineInMiddle/images/img7.jpg" />
                </a>
            </div>
        </div>
        <div class="zxx_zoom_right">
            <h4>文字内容的放大</h4>
            <p class="zxx_zoom_word">这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。比如说，
                <a href="#zoom_word_one"
                    id="zoom_word_1">400像素的放大弹出层</a>。
                <br />如果你觉得这个宽度不够，你可以设置宽度值更大些，例如，
                <a href="#zoom_word_two" id="zoom_word_2">800像素的宽度</a>。</p>
            <!-- <h4>视频或flash的放大</h4>
                    <p class="zxx_zoom_word">
                        这里还可以以浮动层的形式显示flash动画或者是视频。例如，<a href="#zoom_flash_one" id="zoom_flash">简约时钟(swf)</a>
                    </p> -->
        </div>
    </div>

    <!-- 要放大显示的div -->
    <div id="pic_one" class="biggerImg" style="display:none;">
        <img src="../../pic&wordLineInMiddle/images/img2.jpg" />
    </div>
    <div id="pic_two" class="biggerImg" style="display:none;">
        <img src="../../pic&wordLineInMiddle/images/img4.jpg" />
    </div>
    <div id="pic_three" class="biggerImg" style="display:none;">
        <img src="../../pic&wordLineInMiddle/images/img3.jpg" />
    </div>
    <div id="pic_four" class="biggerImg" style="display:none;">
        <img src="../../pic&wordLineInMiddle/images/img7.jpg" />
    </div>
    <div id="zoom_word_one" style="display:none;">400像素宽度层示例：这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。</div>
    <div id="zoom_word_two" style="800px; display:none;">800像素宽度层示例：这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。</div>
    <div id="zoom_flash_one" style="display:none;">
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
            <param name="movie" value="../flash/as3_clock_2.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="9.0.45.0" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="../flash/as3_clock_2.swf" width="550" height="400">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="9.0.45.0" />
                <param name="expressinstall" value="../../Scripts/expressInstall.swf" />
                <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </div>
</body>

</html>

　　效果图

点击左上角图片进行该图片放大。

个人总结：CSS写的真的很好，工整而且美观有效，兼容性很好。

　　但是JS插件其实个人认为还有待改进，在实际行为中是先在HTML里写好放大元素来进行控制。

　　可以改成直接从点击元素里抽取元素进行html复制会更好。

技术参考：http://www.zhangxinxu.com/