单击文字或图片内容放大显示效果插件

    很强大,jQuery也很强大,两者结合在一起就是无比强大.

    这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物.

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

    css:自适应圆角投影效果

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

    图片内容后圆角投影效果图

    jQuery:放大显示效果

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

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

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

    这里简要说一下使用的方法:

    如果您下载的实例包,解压后查看页面源代码,会发现

    $('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true}); ①

    $('#zoom_word_1').fancyZoom({width:400, height:200}); ②

    $('#zoom_word_2').fancyZoom(); ③

    $('#zoom_flash').fancyZoom(); ④

    的调用函数.

    其表示的含义分别是:

    ① class为small_pic的div标签下面的a标签的href指向的层放大.例如:所表示的就是单击这个"some.jpg"图片后,href指向的这个id为"#pic_one"的层放大显示.这就导致了

    这个div放大显示了.

    ② id为zoom_word_1的a标签的href指向的层放大消失,本实例中,此href为"#zoom_word_one",于是页面上默认隐藏的"

    "层就放大显示了.

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

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