jQuery操作篇（2）

编程语言 2018-10-12 16:09:48 阅读次数: 0

1、拖动分隔条改变上下两个DIV块的范围

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖动分隔条改变上下两个DIV块的范围</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
    body{font:14px/1.5 Arial;color: #666;}
    #box{position: relative;width:750px;height:450px;border: 2px solid #000;margin: 10px auto;overflow: hidden;}
    #box div{position: absolute;width:100%;}
    #bottom{background-color: skyblue;top:50%;}
    #line{top:50%;height:2px;overflow: hidden;margin-top: -2px;background: red;cursor: n-resize;}
    img{width:750px;height:450px;}
</style>
<script type="text/javascript">
    window.onload=function(){
        var myBox=$("#box").get(0);
        var myBottom=$("#bottom").get(0);
        var myLine=$("#line").get(0);
        myLine.onmousedown=function(e){//鼠标按下事件
            var disY=(e||event).clientY;
            myLine.top=myLine.offsetTop;
            document.onmousemove=function(e){
                var iT=myLine.top+((e||event).clientY-disY);
                var maxT=myBox.clientHeight-myLine.offsetHeight;
                myLine.style.margin=0;
                myLine.style.top=myBottom.style.top=iT+"px";
                return false;
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                myLine.releaseCapture&&myLine.releaseCapture()
            };
            myLine.setCapture&&myLine.setCapture();
            return false;
        };
    };
</script>
</head>

<body>
<div id="box">
    <div id="top">
        <img src="../../../../百度背景皮肤/star_img/img26.jpg"/>
    </div>
    <div id="bottom">
        <img src="../../../../百度背景皮肤/star_img/img22.jpg"/>
    </div>
    <div id="line"></div>
</div>
</body>
</html>


运行结果：

鼠标拖拉红色区域

2、拖动分隔条改变左右两个DIV块的范围

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖动分隔条改变左右两个DIV块的范围</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
    html,body,div{margin: 0px;padding: 0px;}
    .gf_s{width: 4px;cursor: e-resize;background-color: #fff;border: #99bbe8 1px solid;}    
 .gf_ss{width:4px;display: none;cursor: e-resize;position: absolute;background-color: red;border:#99bbe8 1px solid;filter: alpha(opacity=60);opacity: 0.6;z-index: 1000;}
</style>
<script type="text/javascript">
    var sliderMoving=false;
    function mousePosition(ev){//获取鼠标真实位置
        if(!ev)
            ev=window.event;
        if(ev.pageX||ev.pageY){
            return{x:ev.pageX,y:ev.pageY};
        }
  return{x:ev.clientX+document.documentElement.scrollLeft-document.body.clientLeft,y:ev.clientY+document.documentElement.scrollTop-document.body.clientTop};
    };
    function getElCoordinate(dom){//获取div的绝对定位
        var t=dom.offsetTop;
        var l=dom.offsetLeft;
        dom=dom.offsetParent;
        while(dom){
            t+=dom.offsetTop;
            l+=dom.offsetLeft;
            dom=dom.offsetParent;
        };
        return{top:t,left:l};
    };
    function sliderHorizontalMove(e){//完成分隔条左右拖动
        var lWidth=getElCoordinate($("#divss")[0]).left-2;
        var rWidth=$(window).width()-lWidth-6;
        $("#div_left").css("width",lWidth+"px");
        $("#div_right").css("width",rWidth+"px");
        $("#divss").css("display","none");
    };
    function reinitSize(){
        var width=$(window).width()-6;
        var height=$(window).height();
        $("#div_left").css({height:height+"px",width:width*0.45+"px"});
        $("#divs").css({height:height-2+"px",width:"4px"});
        $("#divss").css({height:height-2+"px",width:"4px"});
        $("#div_right").css({height:height+"px",width:width*0.55+"px"});
    }
    $(document).ready(function(){
        reinitSize();
        $("#divs").on("mousedown",function(e){
            sliderMoving=true;
            $("#div").css("cursor","e-resize");
        });
        $("#div").on("mousemove",function(e){
            if(sliderMoving){
                $("#divss").css({left:mousePosition(e).x-2,display:"block"});
            }
        });
        $("#div").on("mouseup",function(e){
            if(sliderMoving){
                sliderMoving=false;
                sliderHorizontalMove(e);
                $("#div").css("cursor","default");
            }
        });
        $(window).resize();
    });
    $(window).resize(function(){
        reinitSize();
    });
</script>
</head>

<body>
<div id="div" style="width:100%;height: 100%">
    <div id="div_left" style="float: left;">
        <img src="../../../../百度背景皮肤/star_img/img26.jpg" style="width:100%;height: 100%;"/>    
    </div>
    <div id="divs" class="gf_s" style="float: left;"></div>
    <div id="divss" class="gf_ss" style="float:left;"></div>
    <div id="div_right" style="float:left;">
        <img src="../../../../百度背景皮肤/star_img/img32.jpg" style="width:100%;height: 100%;"/>    
    </div>
</div>
</body>
</html>

运行结果：

当鼠标拖动中间空白区

3、动态隐藏DIV块并带有动画缓冲效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态隐藏DIV块并带有动画缓冲效果</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
    .circle_label_rotate{
        -webkit-animation-name:rotateThis;
        -webkit-animation-duration:2s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;
    }
    .circle{
        border-radius: 50px;
        -moz-border-radius:50px;
        height:50px;
        width:50px;
        -webkit-border-radius:50px;
        background: #dedede;
    }
    .sqare{
        height:50px;
        width:400px;
        border:dashed 1px #000000;
        margin-top:10px;
    }
    .innertext{
        padding: 15px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $(".sqare").click(function(){
            $(this).animate({width:"50px",height:"50px"},500,'linear',function(){
                $(this).addClass('circle_label_rotate');
            }).addClass('circle').html('<div class="innertext">Bye</div>').animate({"opacity":"0","margin-left":"510px"},1500,function(){});
            $(this).slideUp('slow');
        });
    });
</script>
</head>

<body>
<div style="width:420px;margin: 0px auto">
    <h4>单击虚线方框可以删除它</h4>
    <div class="sqare"></div>
    <div class="sqare"></div>
    <div class="sqare"></div>
</div>
</body>
</html>


运行结果：

单击虚线框架

4、实现左右两个不同DIV块高度自动匹配

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现左右两个不同DIV块高度自动匹配</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
    #left{background-color: #00ff21;float: left;width:100px;text-align: center;}
    #right{background-color: #0066ff;color:#fff;width: 300px;float: left;}
    .clear{clear: both;}
</style>
<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    function autoHight(){
        if($("left").offsetHeight>=$("right").offsetHeight){
            $("right").style.height=$("left").offsetHeight+"px";
        }else{
            $("left").style.height=$("right").offsetHeight+"px";
        }
    }
    window.onload=function(){
        autoHight();
    }
</script>
</head>
<body>
<div id="left">
    <div style="">
        <p>上海市</p>
        <p style="background-color: #0066ff;color: #fff;">重庆市</p>
    </div>
</div>
<div id="right">
    <div style="padding: 10px;">
        <p>渝北区</p>
        <p>巴南区</p>
        <p>南岸区</p>
        <p>九龙区</p>
        <p>江北区</p>
        <p>北培区</p>
        <p>南郊区</p>
    </div>
</div>
</body>
</html>

运行结果：

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/82952595
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022