写了一个跟随鼠标移动,没有功能主要练习下现象对象的写法,解决了相同相同class名会出现同时移动的情况
js
$(document).ready(function(){
var p={create:function(outside,inside){p.outside=outside;p.inside=inside},move:function(e,$obj){
e=e
x=e.pageX-$obj.offset().left
y=e.pageY-$obj.offset().top
$(p.inside,$obj).css({left:x,top:y})//关键是这里解决了相同class会造成同时移动的情况
}}
function New(obj,params){
function _new(){
if(obj.create){
obj.create.apply(this,params)
}
}
_new.prototype=obj
return new _new()
}
q=New(p,[$(".outside"),".inside"]) //初始化对象分别为祖先jquery包装集,移动元素的class名
q.outside.mouseover(function(){
$obj=$(this)
$(document).bind("mousemove", function(e){q.move(e,$obj)})
})
})
css
<style type="text/css">
.outside{
position:relative;
border:1px solid red;
width:400px;
height:300px;
border:1px solid #FF0;}
.inside{
position:relative;
border:1px solid #F00;
width:50px;
height:50px;}
</style>
html
<body>
<div class="outside">
<div class="inside"></div>
</div>
<div class="outside">
<div class="inside"></div>
</div>
</body>