亘古微博
咨询邮箱:nicholas@anycle.com
您的位置:网站首页 > 新闻动态 > 网络专题 >
[JS] Louver effect by jQuery
来源:未知 作者:nicholas 发表于:2015-05-15 16:12  点击



/* html */
<div class="show" id="show1">
        <div class="list bg0" id="list_1">
        </div>
        <div class="list bg1" id="list_2">
        </div>
        <div class="list bg2" id="list_3">
        </div>
        <div class="list bg3" id="list_4">
        </div>
        <div class="list bg4" id="list_5">
        </div>
        <div class="list bg5" id="list_6">
        </div>
</div>

/* css */
.show{ width:900px; height:245px; background-color:#999999; overflow:hidden;}
.show .list{ width:150px; height:254px; float:left;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari 和 Chrome */
-o-transition: width 1s; /* Opera */}
.show .list_block{ width:500px; background-color:black;}
.show .list_none{ width:80px;}
 
.show .bg0 { background: #00FFCC; }
.show .bg1 { background: #636363; }
.show .bg2 { background: #3d7fbb; }
.show .bg3 { background: #5ca716; }
.show .bg4 { background: #f28b24; }
.show .bg5 { background: #7c0070; }

/* js */
<script>
$(".list").mouseover(function(){
var this_id = this.id.replace("list_", "");
var list_id_this = "#list_"+this_id;
 
for(i=1; i<=6; i++){
if(this_id == i){
$("#list_"+i).removeClass("list_none");
$("#list_"+i).addClass("list_block");
}else{
$("#list_"+i).removeClass("list_block");
$("#list_"+i).addClass("list_none");
}
}
});
$(".list").mouseout(function(){
$(".list").removeClass("list_block");
$(".list").removeClass("list_none");
});
</script>

/* by */
/*
  By net.anycle.com
*/

相关文章推荐
[JS] Louver effect by jQuery

This is a simple solution of louver effect....

[JS] event.preventDefault()

This function will notify Web browser not to perform the default action ...

[JS] How to stop animation of CSS3

There is something wrong while I am trying to stop the animation which is running...

[PHP] isv.invalid-signature of Alibaba api

There is a project with open access platform of Alibaba which submit data need to...

[C] ‘for’ loop initial declarations are

create_tree.c:8:2: error: ‘for’ loop initial declarations are only allowed in...

[JS] indexOf()

Function indexOf() return the position of substr from the string....