by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=80

css很强大，jQuery也很强大，两者结合在一起就是无比强大。这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物。

先来介绍css和jQuery各自发挥了什么作用吧：

css：自适应圆角投影效果

好吧，我承认我写这个圆角投影自适应效果花了好几个小时，加上将自己的自适应代码写入JavaScript中，完成demo实例页面，我是用了差不多整整一个晚上的时间。但是最终实现的效果还是令人欣慰，感觉值得的。您可以从下面这张图看出点最终放大后显示的效果：

新增于2017-12-30
时代变化，现在实现圆角和阴影已经不需要上面这么麻烦了，大家看看就好了。

jQuery：放大显示效果

当您单击触发了内容放大事件后，内容就会由你单击的地方逐渐放大，同时透明度不断升至100%，位置也由单击处移动到浏览器中央，很酷的效果。

建议您狠狠地单击这里：demo效果演示页面去体验下这种效果（附打包下载）

此插件可以几乎可以放大任意的东西，文字，图片，flash，视频，复杂的div等都没有问题。在放大图片的效果上尤为出众。

这里简要说一下使用的方法：
如果您下载的实例包，解压后查看页面源代码，会发现

$(document).ready(function() {
$('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true}); ①
$('#zoom_word_1').fancyZoom({width:400, height:200}); ②
$('#zoom_word_2').fancyZoom(); ③
$('#zoom_flash').fancyZoom(); ④
});

的调用函数。

其表示的含义分别是：

1. class为small_pic的div标签下面的a标签的href指向的层放大。例如：

   <a href="#pic_one"><img src="some.jpg" /></a>

   所表示的就是单击这个”some.jpg”图片后，href指向的这个id为"#pic_one"的层放大显示。这就导致了下面代码对应的div放大显示了。

   <div id="pic_one" style="display:none;"><img loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /></div>

2. id为zoom_word_1的<a>标签的href指向的层放大消失，本实例中，此href为"#zoom_word_one"，于是页面上默认隐藏的层就放大显示了。

   <div id="zoom_word_one" style="display:none;">400像素宽度层示例：这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。</div>

3. 原理与这个类似，关键一点就是<a>标签的href指向。href指那个，那个层在单击后就会放大。而这个放大的层你随便写，随便放东西都没有问题的，与JavaScript脱离，所以即使您不懂JavaScript，也不用担心出错。

最后补充一下，IE6下没有圆角投影效果，因为这个IE6不支持png透明，考虑代码成本，所以IE6下用边框代替了投影，但是效果依旧很酷的！

您可以狠狠地点击这里：源文件下载(.zip 24.4K)

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=80

（本篇完）