前端开发图片3D切换效果

3d前端开发工具|女生从事web前端开发|杭州地区前端开发就业
html 代码片段

<!DOCTYPE html>
<head>
<metacharset=”utf-8″>
<title>如何提高前端开发?3D图片切换效果</title>
</head>
<style>
.wrap{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
margin:0auto;
}
.wrapli{
transition:allease0.6s;
-webkit-transition:allease0.6s;
-moz-transition:allease0.6s;
-o-transition:allease0.6s;
position:absolute;
left:50%;
list-style:none;
-webkit-filter:brightness(0.5);
}
.wrapliimg{
width:100%;
}
.wrapli.current{
transition:allease0.4s;
-webkit-transition:allease0.4s;
top:0;
-webkit-filter:brightness(1.0);
margin-left:-390px;
z-index:5;
}
.wrapli.next,
.wrapli.pre{
width:640px;
top:25px;
z-index:3;
}
.wrapli.next-r,
.wrapli.pre-l{
width:560px;
top:48px;
z-index:1;
}
.wrapli.next{
margin-left:-260px;
}
.wrapli.next-r{
margin-left:-135px;
}
.wrapli.pre{
margin-left:-435px;
}
.wrapli.pre-l{
margin-left:-480px;
}
.wrapa{
width:35px;
height:35px;
top:50%;
margin-top:-16px;
display:block;
position:absolute;
background:url(http://heart.woniu.com/static/web20151014/src/images/graduation_dir.png)no-repeat;
}
.wrapa.pre-btn{
left:0;
background-position:00;
}
.wrapa.next-btn{
right:0;
background-position:0-33px;
}
</style>
<body>
<div class=”wrap”>
<a href=”javascript:;” class=”btn next-btn”></a>
<a href=”javascript:;” class=”btn pre-btn”></a>
<ul style=”position:relative”>
<li class=”current”>
<img src=”http://heart.woniu.com/static/web20151014/src/images/img1.jpg” alt=”” />
</li>
<li class=”next”>
<img src=”http://heart.woniu.com/static/web20151014/src/images/img2.jpg” alt=”” />
</li>
<li class=”next-r”>
<img src=”http://heart.woniu.com/static/web20151014/src/images/img3.jpg” alt=”” />
</li>
<li class=”pre-l”>
<img src=”http://heart.woniu.com/static/web20151014/src/images/img5.jpg” alt=”” />
</li>
<li class=”pre”>
<img src=”http://heart.woniu.com/static/web20151014/src/images/img4.jpg” alt=”” />
</li>
</ul>
</div>
<script src=”http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
$(function(){
$(‘.btn’).click(function(){
var btnIndex=$(this).index(),
picElement=$(‘.wrap ul li’),
picNum=picElement.length,
lastPic=picElement.eq(picNum-1).attr(‘class’),
firstPic=picElement.eq(0).attr(‘class’),
temp;
if (btnIndex==0) {//下一张
for (vari=picNum;i>=0;i–) {
temp=picElement.eq(i-1).attr(‘class’);
if (i==0) {
picElement.eq(i).attr(‘class’,lastPic);
}else{
picElement.eq(i).attr(‘class’,temp);
}
}
}else{//上一张
for (varj=0;j<picNum;j++) {
temp=picElement.eq(j+1).attr(‘class’);
if (j==picNum-1) {
picElement.eq(j).attr(‘class’,firstPic);
}else{
picElement.eq(j).attr(‘class’,temp);
}
}
}
})
})
</script>
</body>
</html>
web前端开发要女生吗?|前端开发经理岗位职责|电信前端开发岗位
» 本文来自:前端开发者 » 《前端开发图片3D切换效果》
» 本文链接地址:https://www.rokub.com/3769.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!