写了一个跟随鼠标移动,没有功能主要练习下现象对象的写法,解决了相同相同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>