js+css3动画实现手风琴
2017-12-12 16:28
357 查看
<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">
<img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg"
/>
</li>
<li class="item iran">
<img src="https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp"
/>
</li>
<li class="item egypt">
<img src="https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg"
/>
</li>
<li class="item turkey">
<img src="https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg"
/>
</li>
<li class="item india">
<img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg"
/>
</li>
<li class="item china">
<img src="https://img.alicdn.com/tfs/TB12mCBfPnD8KJjSspbXXbbEXXa-520-280.jpg_q90_.webp"/>
</li>
</ul>
</div>
</body>
</html>
<script>
window.onload=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].onmouseover=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
<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">
<img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg"
/>
</li>
<li class="item iran">
<img src="https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp"
/>
</li>
<li class="item egypt">
<img src="https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg"
/>
</li>
<li class="item turkey">
<img src="https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg"
/>
</li>
<li class="item india">
<img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg"
/>
</li>
<li class="item china">
<img src="https://img.alicdn.com/tfs/TB12mCBfPnD8KJjSspbXXbbEXXa-520-280.jpg_q90_.webp"/>
</li>
</ul>
</div>
</body>
</html>
<script>
window.onload=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].onmouseover=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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3 animation 实现环形路径平移动画
- CSS3 实现导航菜单的 3D 翻转动画效果
- css3实现的手风琴效果
- CSS3transition实现的简单动画菜单
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
- H5+CSS3实现简单菜单下划线动画
- CSS3实现鼠标悬停动画
- 应用 CSS3 动画实现12种风格的通知提示
- CSS3 实现动画功能
- CSS3 实现 Loading 动画
- 一款基于css3和jquery实现的动画显示弹出层按钮教程
- 纯css3实现的win8加载动画
- 用CSS3实现动画进度条
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- css3实现圆形加载动画的js插件
- css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果？ 用法：animation:xz 3s 2 4s alternate; 参数：animati
- 用纯CSS3实现Path华丽动画
- CSS3实现超酷的图像动画变换特效
- 使用 CSS3 实现超炫的 Loading（加载）动画效果以及cs3的在线制作工具
- 你能相信吗？这是由一个DIV元素实现的动画，纯CSS3技术