自己做的jquery放大镜效果插件，运行提示e没有定义？

html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜效果</title>
<link rel="stylesheet" type="text/css" href="css/myPlugin-base.css" />
<link rel="stylesheet" type="text/css" href="css/shop-base.css" />
</head>
<body>
    <div id="zoomPlay">
        <div class="zoomPup">
            <span class=""></span>
            <img src="images/zoomPic.jpg" alt="" />
        </div>
        <div class="zoomDiv">
            <div class="big"><img src="images/zoomBPic.jpg" alt="" /></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/zoomPlay.js"></script>
<script type="text/javascript">
    $('#zoomPlay').bk_zoom({onPlay:true});
</script>
</html>js：$(function(){
    $.fn.bk_zoom=function(option){
        var elm=$(this);
        var mouseX = 0,        //鼠标移动的位置X
            mouseY = 0,        //鼠标移动的位置Y
            maxLeft = 0,    //最右边
            maxTop = 0,        //最下边
            Left = 0,    //放大镜移动的左部距离
             Top = 0,    //放大镜移动的顶部距离
            perX = 0,    //移动的X百分比
             perY = 0,    //移动的Y百分比
             bigLeft = 0,    //大图要移动left的距离
             bigTop = 0;    //大图要移动top的距离
            
        defaults={
            onPlay:false
        }
        opt=$.extend(defaults,option);
        var zoomOnce={
            init:function(){
                 if (opt.onPlay) {
                     zoomOnce.imgMouseMove(e);
                 }
            },
            //鼠标小图上移动时
            imgMouseMove:function(e){
                alert(e.type);
                var $ = elm.children(".");
                //鼠标在小图的位置
                mouseX = e.pageX-elm.offset().left - $.outerWidth()/2;
                mouseY = e.pageY-elm.offset().top - $.outerHeight()/2;
                
                //最大值
                maxLeft =elm.width()- $.outerWidth();
                maxTop =elm.height()- $.outerHeight();
                Left = mouseX;
                Top = mouseY;
                
                updataMark($);
                updataBig();
            },
            //改变放大镜的位置
            updataMark:function($){
                //通过判断，让小框只能在小图区域中移动        
                if(Left<0){
                    Left = 0;
                }else if(Left>maxLeft){
                    Left = maxLeft;
                }
                
                
                if(Top<0){
                    Top = 0;
                }else if(Top>maxTop){
                    Top = maxTop;
                }
                
                //获取放大镜的移动比例，即这个小框在区域中移动的比例
                perX = Left/$(".zoomPup").outerWidth();
                perY = Top/$(".zoomPup").outerHeight();
                alert(perY);
                
                bigLeft = -perX*$(".zoomDiv .big").outerWidth();
                bigTop = -perY*$(".zoomDiv .big").outerHeight();
                
                //设定小框的位置
                $.css({"left":Left,"top":Top,"display":"block"});
            },
            //改变大图的位置
            updataBig:function(){
                $(".zoomDiv .big").css({"display":"block","left":bigLeft,"top":bigTop});
            },
            //鼠标移出时
            cancle:function(){
                $(".zoomDiv .big").css({"display":"none"});    
                $(".").css({"display":"none"});
            }        }
        zoomOnce.init();
    }
});自己写的但不知道哪儿错了，运行不了？请大家帮帮看看
jquery

解决方案 »

  1.   

    jquery 主文件正确引用了吗？
      

  2.   

    $(function () {
    $.fn.bk_zoom = function (option) {
    var elm = $(this);
    var mouseX = 0, //鼠标移动的位置X
    mouseY = 0, //鼠标移动的位置Y
    maxLeft = 0, //最右边
    maxTop = 0, //最下边
    Left = 0, //放大镜移动的左部距离
    Top = 0, //放大镜移动的顶部距离
    perX = 0, //移动的X百分比
    perY = 0, //移动的Y百分比
    bigLeft = 0, //大图要移动left的距离
    bigTop = 0; //大图要移动top的距离
    defaults = {
    onPlay : false
    }
    opt = $.extend(defaults, option);
    var zoomOnce = {
    init : function (e) {
    if (opt.onPlay) {
    zoomOnce.imgMouseMove(e);
    }
    },
    //鼠标小图上移动时
    imgMouseMove : function (e) {
    alert(e.type);
    var $ = elm.children(".");
    //鼠标在小图的位置
    mouseX = e.pageX - elm.offset().left - $.outerWidth() / 2;
    mouseY = e.pageY - elm.offset().top - $.outerHeight() / 2; //最大值
    maxLeft = elm.width() - $.outerWidth();
    maxTop = elm.height() - $.outerHeight();
    Left = mouseX;
    Top = mouseY; updataMark($);
    updataBig();
    },
    //改变放大镜的位置
    updataMark : function ($) {
    //通过判断，让小框只能在小图区域中移动
    if (Left < 0) {
    Left = 0;
    } else if (Left > maxLeft) {
    Left = maxLeft;
    } if (Top < 0) {
    Top = 0;
    } else if (Top > maxTop) {
    Top = maxTop;
    } //获取放大镜的移动比例，即这个小框在区域中移动的比例
    perX = Left / $(".zoomPup").outerWidth();
    perY = Top / $(".zoomPup").outerHeight();
    alert(perY); bigLeft = -perX * $(".zoomDiv .big").outerWidth();
    bigTop = -perY * $(".zoomDiv .big").outerHeight(); //设定小框的位置
    $.css({
    "left" : Left,
    "top" : Top,
    "display" : "block"
    });
    },
    //改变大图的位置
    updataBig : function () {
    $(".zoomDiv .big").css({
    "display" : "block",
    "left" : bigLeft,
    "top" : bigTop
    });
    },
    //鼠标移出时
    cancle : function () {
    $(".zoomDiv .big").css({
    "display" : "none"
    });
    $(".").css({
    "display" : "none"
    });
    } }
    $(this).mouseover(function(e){
    zoomOnce.init(e);
    });
    }
    });