jquery2014-10-31 23:16:06 4946
利用Jquery制作的图片分类,过滤。共有3中效果可以选择。兼容IE7以及以上,chrome,safari等等浏览器。先上一张效果图以及在线演示地址。
HTML
效果1效果2效果3查看源代码汽车美女摄影全部
CSS
#MainDiv{ width:680px; margin:0 auto; margin-top:20px; height:800px; } #MainDiv>img{ width:200px; height:150px; border:5px solid #fff; margin-left:20px; margin-top:20px; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; position:absolute; } #MainDiv>img:hover{ opacity:0.8; } .btnP{ margin:0px; text-align:center; margin-top:50px; } .btnA{ /* float:left; padding:8px 20px 8px 20px; border:1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; */ font: 15px "微软雅黑", Arial, Helvetica, sans-serif; margin-left:20px; cursor:pointer; text-decoration:none; color:#808080; } .btnSelect{ padding:5px 20px 5px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #4a3113; outline: none; border: 1px solid #fff; color: #fff; opacity: 0.8; text-align: center; cursor: pointer; margin-left:10px; } .btnSelect:hover{ opacity:1; }
Jq
function ChangeFlag(a){ $(".btnA").css("color","#808080"); ImageSelectHandler.selectAll(); switch(a){ case 0: $(".btnOne").css("color","#FC6"); ImageSelectHandler.ImageSelectFlag=0; break; case 1: $(".btnTwo").css("color","#FC6"); ImageSelectHandler.ImageSelectFlag=1; break; case 2: $(".btnThree").css("color","#FC6"); ImageSelectHandler.ImageSelectFlag=2; break; } } var ImageSelectHandler={ ImageSelectFlag:0, Init:function(){ for(var i=0;iimg").length;i ){ if(i<=2){ $($("#MainDiv>img")[i]).stop().animate({marginLeft:i*25 210*i "px",marginTop:"0px"},500); }else if(i<=5){ var index=i-3; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:205},500); }else if(i<=8){ var index=i-6; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:395},500); }else{ var index=i-9; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:585},500); } } }, SelectCar:function(){ switch(ImageSelectHandler.ImageSelectFlag){ case 0: $(".ImageCar").stop().animate({opacity:1},500); $(".ImageGirl").stop().animate({opacity:0.1},500); $(".ImagePhoto").stop().animate({opacity:0.1},500); break; case 1: ImageSelectHandler.selectAll(); setTimeout(function(){ $(".ImageCar").css("z-index",10); $(".ImageCar").animate({width:"220px",height:"160px",opacity:1},500); for(var i=0;iimg").length;i ){ if(i<=2){ $($("#MainDiv>img")[i]).stop().animate({marginLeft:i*25 210*i "px",opacity:1,width:200 "px",height:"150px",marginTop:"0px"},50); }else if(i<=5){ var index=i-3; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:205,opacity:1,width:200 "px",height:"150px"},50); }else if(i<=8){ var index=i-6; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:395,opacity:1,width:200 "px",height:"150px"},50); }else{ var index=i-9; $($("#MainDiv>img")[i]).stop().animate({marginLeft:index*25 210*index "px",marginTop:585,opacity:1,width:200 "px",height:"150px"},50); } } } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery图片分类,Jquery图片选择,Jquery图片过滤
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/Nzk=.html
上一篇 CSS圆角
下一篇 Javascript世界地图