首页 > 代码库 > javascript原生百叶窗
javascript原生百叶窗
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
.box{ | |
width:1200px; | |
height:400px; | |
border:1px solid black; | |
position:relative; | |
overflow:hidden; | |
} | |
.son{ | |
width:700px; | |
height:400px; | |
position:absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<div class="son" style=background:red; >1</div> | |
<div class="son" style=background:pink;>2</div> | |
<div class="son" style=background:green;>3</div> | |
<div class="son" style=background:yellow;>4</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
var bo=document.querySelector(".box"); /*1.获取大盒*/ | |
var so=document.querySelectorAll(".son"); /*2.获取所有的子元素*/ | |
var ow=so[0].offsetWidth; /*子级获取父级的宽度*/ | |
var ew=(bo.offsetWidth-ow)/(so.length-1); | |
//父级减去子级的宽度除子集的长度,为什么-1,因为有一个不用4-1;三个位置 | |
fun1(); | |
function fun1(){ | |
for(var i=0; i<so.length;i++){ /*for循环取子元素的长度*/ | |
so[i].index=i /*取子元素的对应位置的*/ | |
so[i].style.left=(i>0?ow+(i-1)*ew:0)+"px"; /*如果i>0父级的就执行(i-1)就是他跑的距离*ew距离是0;*/ | |
so[i].onmouseover=function(){ | |
fun1() | |
for(var j=1;j<=this.index;j++) /*j=1,从1开始,这是所有是位置。j++;*/ | |
so[j].style.left=j*ew+"px"; /*输出网页子元素左边的j*ew*/ | |
} | |
} | |
} | |
</script> | |
</html> |
javascript原生百叶窗
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。