<head>
<meta charset="utf-8">
<title>供应商切换</title>
<style>
*{ margin:0;padding:0;}
a img{ border:none;}
a{ text-decoration:none;}
.swicth-box{
width:920px;
height:280px;
margin:150px auto;
overflow:hidden;
border:1px solid #ddd;
border-top:2px solid #728ca4;
}
.swicth-box>ul{
width:100%;
height:100%;
position:relative;
margin-top:4px;
}
.swicth-box>ul>li{
list-style:none;
position:absolute;
top:0;
background-color:#fff;
transition:1s all ease-in-out;
}
.swicth-box>ul .item{
width:520px;
height:280px;
box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
-webkit-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
-o-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
-moz-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
-ms-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
overflow:hidden;
}
.over:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="swicth-box">
<ul>
<li class="item other over">
</li>
<li class="item iran">
</li>
<li class="item egypt">
</li>
<li class="item turkey">
</li>
<li class="item india">
</li>
<li class="item china">
</li>
</ul>
</div>
</body>
</html>
<script>
window.οnlοad=function(){
/****getStyle封装计算后样式*****/
function getStyle(element,attr){
if(element.currentstyle){
return element.currentstyle[attr];
}else{
return window.getComputedStyle(element,null)[attr];
}
}
/**构造函数**/
function Accordion(obj){
var _this=this;
this.box=document.querySelector(obj.dom);
this.li=_this.box.children[0].children; //获取整个容器里所有的li项；
this.ul_width=Number(getStyle(_this.box.children[0],'width').replace("px",'')); //获取ul的宽度
this.li_width=Number(getStyle(_this.box.children[0].children[0],'width').replace("px",'')); //获取li的宽度
this.spacing=(_this.ul_width-_this.li_width)/(_this.li.length-1);
this.init=function(){
for(var i=0;i<_this.li.length;i++){
if(i==0){
_this.li[0].style.left=0;
_this.li[0].classList.remove("over");
}else{
_this.li[i].style.left=_this.li_width+_this.spacing*(i-1);
_this.li[i].classList.add("over");
}
}
};
this.move=function(){
var places=new Array();
//创建数组保存每个li的位置
for(var i=0;i<_this.li.length;i++){
(function(i){
_this.li[i].οnmοuseοver=function(e){
var e=e||window.event;
if(e.cancelBubble){
e.cancelBubble = true;
}else{
e.topPropagation;
}
/******根据鼠标hovre的下标判断每个li的位置******/
switch(i){
case 0:
for(var index=0;index<_this.li.length;index++){
if(index==0){
places[0]=0;
}else{
places[index]=_this.li_width+(index-1)*_this.spacing;
}
}
break;
default:
for(var index=0;index<_this.li.length;index++){
if(index==0){
places[0]=0;
}else if(index<=i){
places[index]=_this.spacing*index;
}else{
places[index]=_this.li_width+(index-1)*_this.spacing;
}
}
break;
}
/****给每个li的left赋值****/
for(var index=0;index<_this.li.length;index++){
_this.li[index].style.left=places[index];
_this.li[index].classList.add("over");
}
_this.li[i].classList.remove("over");
}
}(i));
}
}
this.init(); //自执行初始化方法
}
var accordion=new Accordion({dom:'.swicth-box'});
accordion.move();
}
</script>
可以进群领取更多资料~WEB前端学习交流群21 598399936
可以进群领取更多资料~WEB前端学习交流群21 598399936
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
