自己做的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="mark"></span>
<img src="images/zoomPic.jpg" alt="自各儿做的jquery放大镜效果插件，运行提示e没有定义" />
</div>
<div class="zoomDiv">
<div class="big"><img src="images/zoomBPic.jpg" alt="自各儿做的jquery放大镜效果插件，运行提示e没有定义" /></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();
}
});
自己写的但不知道哪儿错了，运行不了？请大家帮帮看看
jquery
[解决办法]
$(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 (e
) {
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"
});
}
}
$(this).mouseover(function(e){
zoomOnce.init(e);
});
}
});
