jqzoom使用简介

使用jqzoom实现类似于京东淘宝上的图片展示，就是鼠标放到图片上会显示局部放大图。jqzoom是基于jquery的。

本例是使用HTML5实现图片上传预览，用到的是html5的FileReader对象，直接读取本地图片。

<script type="text/javascript">

        var options = {
                    zoomWidth  : 500,  //放大图的宽度(默认是 200)
                    zoomHeight : 500,  //放大图的高度(默认是 200)
                    xOffset    : 5,  //离原图的距离(默认是 10)
                    yOffset    : 0,   //离原图的距离(默认是 10)
                    position   : "right",    // values:'right' ,'left' ,'top' ,'bottom'
                    title      : true,       // 标题是否显示
                    lens       : true,       // 里面的小的属标指向区域是否显示
                    showEffect : "fadein",   // 右侧大图片的显示效果  'show' ,'fadein'.  默认是：show
                    hideEffect : "hide",     // 右侧大图片的显示效果  'hide' ,'fadeout'. 默认是：hide
                    fadeinSpeed : "slow",   //速度参数(options: 'fast','slow','medium')
                    fadeoutSpeed : "fast",
            };

          $(function(){

               //初始化jqzoom插件

               $(".jqzoom").jqzoom(options);

           });

          //上传图片回并回显
            function showTempFile(files,showImg){
                //检测浏览器是否支持HTML5的FileReader属性
                if(typeof FileReader == "undefined"){
                    alert("您的浏览器不支持FileReader对象！");
                }
                var file = document.getElementById("file");
                alert(file);
                for(var i=0;i<files.length;i++){
                    var tmpFile = files[i];
                    if(!/image\/\w+/.test(tmpFile.type)){
                        alert("请上传图片文件");
                        return false;
                    }
                        var reader = new FileReader();
                        reader.readAsDataURL(tmpFile);
                        reader.οnlοad=function(e){
                            
                        $("#showImg").html("<a href='"+e.target.result+"' class='jqzoom'><img src='"+e.target.result+"' width='300px' height='300px' style='border: 1px solid #666;'></a>");
                        $(".jqzoom").jqzoom(options);
                    };
                }
            }

</script>

在html的body标签中写入：<input type="file" multiple="multiple" id="file" value="上传图片" οnchange="showTempFile(this.files,'showImg');" />