首页 新闻 搜索 专区 学院

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

0
悬赏园豆:5 [已解决问题] 解决于 2013-03-04 15:32

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="mark"></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,        //最下边
            markLeft = 0,    //放大镜移动的左部距离
             markTop = 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 $mark = elm.children(".mark");
                //鼠标在小图的位置
                mouseX = e.pageX-elm.offset().left - $mark.outerWidth()/2;
                mouseY = e.pageY-elm.offset().top - $mark.outerHeight()/2;
                
                //最大值
                maxLeft =elm.width()- $mark.outerWidth();
                maxTop =elm.height()- $mark.outerHeight();
                markLeft = mouseX;
                markTop = mouseY;
                
                updataMark($mark);
                updataBig();
            },
            //改变放大镜的位置
            updataMark:function($mark){
                //通过判断,让小框只能在小图区域中移动        
                if(markLeft<0){
                    markLeft = 0;
                }else if(markLeft>maxLeft){
                    markLeft = maxLeft;
                }
                
                
                if(markTop<0){
                    markTop = 0;
                }else if(markTop>maxTop){
                    markTop = maxTop;
                }
                
                //获取放大镜的移动比例,即这个小框在区域中移动的比例
                perX = markLeft/$(".zoomPup").outerWidth();
                perY = markTop/$(".zoomPup").outerHeight();
                alert(perY);
                
                bigLeft = -perX*$(".zoomDiv .big").outerWidth();
                bigTop = -perY*$(".zoomDiv .big").outerHeight();
                
                //设定小框的位置
                $mark.css({"left":markLeft,"top":markTop,"display":"block"});
            },
            //改变大图的位置
            updataBig:function(){
                $(".zoomDiv .big").css({"display":"block","left":bigLeft,"top":bigTop});
            },
            //鼠标移出时
            cancle:function(){
                $(".zoomDiv .big").css({"display":"none"});    
                $(".mark").css({"display":"none"});
            }

        }
        zoomOnce.init();
    }
});

自己写的但不知道哪儿错了,运行不了?请大家帮帮看看

wanglan的主页 wanglan | 初学一级 | 园豆:156
提问于:2013-03-04 12:38
< >
分享
最佳答案
1

 if (opt.onPlay) {
  zoomOnce.imgMouseMove(e);
}

 

这个e没有定义啊

收获园豆:5
飞来飞去 | 老鸟四级 |园豆:2057 | 2013-03-04 13:12

e没有定义,怎么改代码可以正常运行?

wanglan | 园豆:156 (初学一级) | 2013-03-04 13:37

@wanglan:

if (!!event && opt.onPlay) {
  zoomOnce.imgMouseMove(event);
}

飞来飞去 | 园豆:2057 (老鸟四级) | 2013-03-04 14:06

@飞来飞去: 因为你触发事件的时候还没有event,所以不能执行啊

飞来飞去 | 园豆:2057 (老鸟四级) | 2013-03-04 14:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册