<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
#one{
border: 1px solid lime;
width: 203px;
height: 300px;
}
#one img{
width: 203px;
height: 300px;
}
#two{
display: none;
border: 1px solid red;
position: absolute;
height: 200px;
width: 200px;
left: 500px;
top: 0px;
background: url("image/1.jpg") no-repeat;
}
</style>
</head>
<body>
<div id="one">
<img src="image/1.jpg" alt="" width="406px" height="600px"/>
</div>
<div id="two">
</div>
</body>
<script>
/* window.onload=function(){
var one=document.getElementById("one");
var two=document.getElementById("two");
var time = setInterval(function () {
addEvent(one,"mousemove", function () {
two.style["display"] = "block";
setPosition(two,(getOffsetX()-one.offsetLeft)*100/203,(getOffsetY()-one.offsetTop)*100/300)
})
}, 30);
};
function addEvent(obj,event,fn){
if(window.addEventListener){
obj.addEventListener(event,fn,false);
}else if(window.attachEvent){
obj.attachEvent("on"+event,fn);
}else{
obj["on"+event]=fn;
}
};
function getOffsetX(e){
var eve = e || window.event;
return eve.clientX;
};
function getOffsetY(e){
var eve = e || window.event;
return eve.clientY;
};
function setPosition(obj,x,y){
obj.style["background-position"]=""+x+"% "+y+"%"
}*/
(function($, exports){
var mod = {};
mod.create = function(includes){
var result = function(){
this.init.apply(this, arguments);
};
result.fn = result.prototype;
result.fn.init = function(){};
result.proxy = function(func){ return $.proxy(func, this); };
result.fn.proxy = result.proxy;
result.include = function(ob){ $.extend(this.fn, ob); };
result.extend = function(ob){ $.extend(this, ob); };
if (includes) result.include(includes);
return result;
};
exports.Controller = mod;
})(jQuery, window);
var exports = this;
jQuery(function ($) {
exports.big = Controller.create({
// 选择器到局部变量名的映射
elements: {
"#one": "mouserover",
"#two":"block"
},
// 实例化时调用
init: function (element) {
this.el = $(element);
this.refreshElements();
this.mouserover.mouseover(this.proxy(this.show));
},
show: function () {
this.block.css("display","block");
this.setPosition(this.block,(this.getOffsetX()-this.mouserover.offsetLeft)*100/203,(this.getOffsetY()-this.mouserover.offsetTop)*100/300);
},
// 私有
$: function (selector) {
return $(selector);
},
// 设置本地变量
refreshElements: function () {
for (var key in this.elements) {
this[this.elements[key]] = this.$(key);
}
},
setPosition:function(obj,x,y){
//obj.style["background-position"]=x+"% "+y+"%";
obj.get(0).style.background=x+"% "+y+"%";
},
getOffsetX:function(e){
var eve=e||window.event;
return eve.clientX;
},
getOffsetY:function(e){
var eve=e||window.event;
return eve.clientY;
},
});
new big();
});
/*..............................................*/
</script>
</html>
请问大家如何把setInterval加入到框架中
