87,910
社区成员
发帖
与我相关
我的任务
分享请问类似于这种动画效果应该如何使用js或者css3实现？求大神给个思路？
http://www.itcast.cn/subject/webzly/index.shtml
http://www.vanke.com/
...全文
请发表友善的回复…
发表回复
当作看不见 2017-02-21
- 打赏
- 举报
http://blog.csdn.net/qq_29594393/article/details/52748698
#麻辣小龙虾# 2017-02-21
- 打赏
- 举报
已经通过css3实现，但是感觉兼容性不好，另外总觉得这样实现方法太笨，望大神指点更好的实现方法！
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>手风琴</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ol, ul ,li{list-style: none;}
div{
width:600px;
height: 300px;
margin: auto;
overflow:hidden;
position:relative;
}
div li {
width:400px;
height: 300px;
float:left;
}
.li01{position:absolute;left:0;z-index:0;}
.li02{position:absolute;left:50px;z-index:1;}
.li03{position:absolute;left:100px;z-index:2;}
.li04{position:absolute;left:150px;z-index:3;}
.li05{position:absolute;left:200px;z-index:4;}
.hv01 .li01{left:0;transition:all 1s ease;}
.hv01 .li02{left:400px;transition:all 1s ease;}
.hv01 .li03{left:450px;transition:all 1s ease;}
.hv01 .li04{left:500px;transition:all 1s ease;}
.hv01 .li05{left:550px;transition:all 1s ease;}
.hv02 .li01{left:0;transition:all 1s ease;}
.hv02 .li02{left:50px;transition:all 1s ease;}
.hv02 .li03{left:450px;transition:all 1s ease;}
.hv02 .li04{left:500px;transition:all 1s ease;}
.hv02 .li05{left:550px;transition:all 1s ease;}
.hv03 .li01{left:0;transition:all 1s ease;}
.hv03 .li02{left:50px;transition:all 1s ease;}
.hv03 .li03{left:100px;transition:all 1s ease;}
.hv03 .li04{left:500px;transition:all 1s ease;}
.hv03 .li05{left:550px;transition:all 1s ease;}
.hv04 .li01{left:0;transition:all 1s ease;}
.hv04 .li02{left:50px;transition:all 1s ease;}
.hv04 .li03{left:100px;transition:all 1s ease;}
.hv04 .li04{left:150px;transition:all 1s ease;}
.hv04 .li05{left:550px;transition:all 1s ease;}
.hv05 .li01{left:0;transition:all 1s ease;}
.hv05 .li02{left:50px;transition:all 1s ease;}
.hv05 .li03{left:100px;transition:all 1s ease;}
.hv05 .li04{left:150px;transition:all 1s ease;}
.hv05 .li05{left:200px;transition:all 1s ease;}
</style>
</head>
<body>
<div class="">
<ul>
<li style="background-color:blue;" class="li01"></li>
<li style="background-color:lightblue;" class="li02"></li>
<li style="background-color:lightcyan;" class="li03"></li>
<li style="background-color:lightgray;" class="li04"></li>
<li style="background-color:lightpink;" class="li05"></li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var leftArray = [];
$("li").hover(function(){
var index = $(this).index()+1;
$(this).parent().parent().attr({'class':'hv0'+index});
});
</script>
</body>
</html>
#麻辣小龙虾# 2017-02-21
- 打赏
- 举报
[quote=引用 楼主 CodingNoob 的回复:]
http://www.itcast.cn/subject/webzly/index.shtml
非常感谢你的回答！，但是你注意看下这个网站上面这个效果，虽然有点像但是不是你发的那个手风琴效果的，那个手风琴效果我知道怎么写。
http://www.itcast.cn/subject/webzly/index.shtml
非常感谢你的回答！，但是你注意看下这个网站上面这个效果，虽然有点像但是不是你发的那个手风琴效果的，那个手风琴效果我知道怎么写。
当作看不见 2017-02-21
- 打赏
- 举报
求告知那个代码的bug~[/quote]
bug 在于,动画过程中一样可以触发事件,当动画效果在进行到一半的时候,鼠标刚好在中间的话,就会出现左右无限循环的拉动,鼠标移开就好.不想处理这个,由于和标题不和.我就直接使用finish .消除掉这个bug,不过产生的新bug,就是连续触发时,动画体验不是特别好.
圭宁的小小前端 2017-02-21
- 打赏
- 举报
求告知那个代码的bug~
