• jQuery控制div层,使其移动、改变位置


    1、移动div

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    
    <html>  
    
        <head>  
    
            <title>test2.html</title>  
    
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    
            <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
    
           <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    
            <script type="text/javascript">  
    
    var b = function(){   
    
        $("body").append("<div id='hid' style='background:red;position:absolute;880;height:120'>我是可以拖动的半透明div,Firefox下暂时只能获取点击事件,event无解</div>");   
    
        $("#hid").fadeTo("slow", 0.5);   
    
        $("#hid").mousedown(function(event){   
    
            var offset=$("#hid").offset();   
    
            x1=event.clientX-offset.left;   
    
            y1=event.clientY-offset.top;   
    
            $("#hid").mousemove(function(event){   
    
               $("#hid").css("left",(event.clientX-x1)+"px");   
    
                $("#hid").css("top",(event.clientY-y1)+"px");   
    
    /*
    
    $("#hid").animate({
    left : _x + "px",
    top : _y + "px"
    }, 10);
    
    */
    
            });   
    
            $("#hid").mouseup(function(event){   
    
                $("#hid").unbind("mousemove");   
    
            });   
    
        });   
    
    }   
    
    </script>  
    
        </head>  
    
        <body>  
    
            <input type=button value="点我显示div" onclick="b()">  
    
        </body>  
    
    </html>
    View Code

    2、div跟随某个控件的位置改变而改变

    var offset = $("#selectInfoDiv").offset();  //获取相对控件的偏移位置
    var left=offset.left;
    var top=offset.top;      
    var width = $("#selectInfoDiv").width();   //该控件的宽度和高度
    var height= $("#selectInfoDiv").height(); 
    top=(top+(height-206)/2)<200?200:(top+(height-206)/2);
    $("#addDiv").css({left:left+((width-666)/2),top:top});   //addDiv是跟随selectInfoDiv的位置变化而变化
  • 相关阅读:
    redis复制
    redis发布订阅
    redis事务
    redis持久化
    redis.conf 常见配置介绍
    redis数据类型
    redis集群安装
    redis单机版安装
    eclipse下svn的使用
    算法五最长回文子串
  • 原文地址:https://www.cnblogs.com/lbangel/p/3107551.html
Copyright © 2020-2023  润新知