JQuery放大镜效果

在网上找了些实现放大镜效果的方法，感觉这个方法符合我的要求就摘过来了，非原创

在一些电子商务或商品展示网上，为了更好的显示商品，一般都会添加放大镜的效果。

如图：（当把鼠标放到小图片上，右边会自动的出现放大图）

好了，我们直接来实现。（前提：已下载jquery.js）

1、下载jqzoom插件，取出里面的jquery.jqzoom.js和jqzoom.css

2、建立Web网站，按照下面的结构组织好文件

注：room_big.jpg和room_small.jpg是事先准备好的两张图片，一大一小

3、在页面中添加脚本和样式的引用

< head  runat ="server" >
     < title > 放大镜效果 </ title >
     < link  href ="css/jqzoom.css"  rel ="stylesheet"  type ="text/css"  media ="screen"   />
     < script  type ="text/javascript"  src ="js/jquery.js" ></ script >
     < script  type ="text/javascript"  src ="js/jquery.jqzoom.js" ></ script >
</ head >

复制代码

 

4、添加图片显示代码

< div >
    家装图欣赏(请把鼠标放到图片上)
    < div  class ="jqzoom" >
        < img  src ="images/room_small.jpg"  alt ="房间演示"  jqimg ="images/room_big.jpg"   />
    </ div >
</ div >

复制代码

注：div指明类样式"jqzoom"，img标记中的jqimg属性是指放大图为哪张图片

5、添加脚本，设置放大镜效果

< script  type ="text/javascript" >
        $(document).ready( function (){
            $( " .jqzoom " ).jqueryzoom({
                xzoom: 300 ,   //  放大图的宽
                yzoom: 300 ,   //  放大图的高
                offset: 30 ,    //  放大图距离原图的位置
                position: ' right '    //  放大图在原图的右边(默认为right)
            });
        });
</ script >

复制代码 运行代码

注：$(".jqzoom")是获得本页面中所有类样式为jqzoom的元素，jqueryzoom方法是进行放大效果设置 
在上面我们给出了一些选项的设置，也可以进行默认方式的调用，如：$(".jqzoom").jqueryzoom();

OK，测试运行，怎么样，效果出来了吧！

 

 

转载于:https://www.cnblogs.com/Kiss920Zz/archive/2011/12/20/2294209.html