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>
运行结果: