zoukankan      html  css  js  c++  java
  • jquery 跟随鼠标移动

    写了一个跟随鼠标移动,没有功能主要练习下现象对象的写法,解决了相同相同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>
    
  • 相关阅读:
    HttpResponse对象、JsonResponse、StreamingHttpResponse、FileResponse
    for循环
    字符串功能
    (二)第一个Spring Boot工程
    (一)安装Docker和Kubernetes
    如何解决CHM打开乱码的问题
    [译]PyUnit—Python单元测试框架(1)
    正则表达式
    Java开发心得
    Shell获取文件后缀名
  • 原文地址:https://www.cnblogs.com/breakdown/p/2405150.html
Copyright © 2011-2022 走看看