写了一个跟随鼠标移动,没有功能主要练习下现象对象的写法,解决了相同相同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; 400px; height:300px; border:1px solid #FF0;} .inside{ position:relative; border:1px solid #F00; 50px; height:50px;} </style>
html
<body> <div class="outside"> <div class="inside"></div> </div> <div class="outside"> <div class="inside"></div> </div> </body>