javascript经典特效分享经典特效分享 手风琴、轮播图、图片滑动手风琴、轮播图、图片滑动
主要介绍了javascript经典特效,手风琴、轮播图、图片滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近都没有更,就来几个效果充实一下。
都没有进行美化这步。
纯css的手风琴:手风琴:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴css</title>
<style>
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 110px;
overflow: hidden;
transition: all 0.3s;
}
/* 这是css手风琴的核心,就是hover的使用
**首先是ul:hover li这个触发了经过ul但没有经过li的变化
**然后是ul li:hover这里是被经过li的变化,匹配css3动画效果,
和css3的一些对页面美化的效果,就可以做出一个很好看的手风琴,
如果使用纯js实现可能很麻烦。
*/
ul:hover li{
width:22px;
}
ul li:hover{
width: 460px;
}
ul li img{
width: 550px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
right: 0;
height: 204px;
padding-top: 50px;
color: #fff;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="showBox">
<ul>
<li><span class="bg1">这是第一个</span><img src="1.jpg" alt=""></li>
<li><span class="bg2">这是第二个</span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">这是第三个</span><img src="3.jpg" alt=""></li>
<li><span class="bg4">这是第四个</span><img src="4.jpg" alt=""></li>
<li><span class="bg5">这是第五个</span><img src="5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
css3手风琴:手风琴:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-checked:</title>
<style>
/* 使用了radio的单选特性,实现手风琴效果 */
ul{
display: none;
}
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
</style>
</head>
<body>
<div> <label for="list1">我的同学</label> <input type="radio" name="list" id="list1" checked="chekced"/>
<ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list2">我的同学</label>
<input type="radio" name="list" id="list2"/>
<ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list3">我的同学</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> <label for="list4">我的同学</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> <li><a href="">同学名字</a></li> </ul> </div>
</body>
</html>
javascript实现的手风琴: