. clip属性的用法
clip属性的值指定了元素的剪切区域，目前它的剪切区域只能是矩形的。
语法：clip: rect(top right bottom left)；
单位：为像素为长度值，不允许使用百分比，可以使用负数，表示剪切区域的可以延伸到指定元素的长度之外；
可以使用auto：表示剪切区域与相应边界一致；
JavaScript语法：element.style.clip = “rect(top right bottom left)”;
二. 小例子代码：
<!DOCTYPE html> <html> <head> <style> .container{ clip: rect(0px 0px 0px 0px); position: absolute; width: 400px; height:500px; } .item{ width:100%; height:20%; } .item1{ background: red; } .item2{ background: blue; } .item3{ background: yellow; } .item4{ background: green; } .item5{ background: pink; } </style> </head> <body> <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> <div class="item item5"></div> </div> <script type="text/javascript"> var height = 0; var divid = document.querySelector(‘.container‘); /*这两个标记为了完成出现和消失的相互转换*/ var addflag = 0; var subflag = 0; /*逐渐出现*/ function changeAdd(){ height = height + 100; divid.style.clip = "rect(0px 400px "+ height+"px 0px)"; if (height == 500) addflag = 1; } /*逐渐消失*/ function changeSub(){ height = height - 100; divid.style.clip = "rect(0px 400px "+ height+"px 0px)"; if (height == 0) subflag = 1; } setInterval(function(){ if (addflag == 0){ changeAdd(); } else if(subflag == 0){ changeSub(); } else{ /*循环显示*/ addflag = 0; subflag = 0; } }, 500); </script> </body> </html>