首页 > 代码库 > Css3 javascript 写的分类
Css3 javascript 写的分类
不兼容IE10以下的浏览器
<!DOCTYPE html><html><head><meta charset=utf-8><title>Css3分类</title><style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} a{color:#333333; text-decoration:none;} a:hover{color:#FF0000; text-decoration:none;} input{ background:#fff; border:1px solid #ccc; padding:10px; width: 60px; } div{ font-size: 14px; color: #333; width: 235px; background: #000; margin: 5px; padding: 10px; float:left; overflow:hidden; color: #fff; height: 234px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } img{ width:100%; height:100%; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } div img:hover{ transform: scale(2); -webkit-transform: scale(2); } .block{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; width: 0; padding: 0; margin: 0; } .block-s{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)"; filter: alpha(opacity=1); opacity: 1; }</style></head><body><input type="button" id=‘alls‘ value=http://www.mamicode.com/"全部"/><input type="button" id=‘all‘ value=http://www.mamicode.com/"人物"/><input type="button" id=‘ff‘ value=http://www.mamicode.com/"风景"/><br/><br/><div data-all=‘all‘><img src=http://www.mamicode.com/"http://pic21.nipic.com/20120614/9662903_195628630177_2.jpg"/></div><div data-all=‘ff‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/7.jpg"/></div><div data-all=‘all‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/1.jpg"/></div><div data-all=‘ff‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/5.jpg"/></div><div data-all=‘ff‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/6.jpg"/></div><div data-all=‘all‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/3.jpg"/></div><div data-all=‘all‘><img src=http://www.mamicode.com/"http://www.template-guide.com/preview/5309/images/portfolio/4.jpg"/></div><script> var Oall = document.getElementById ( ‘all‘ ) ; var Oaff = document.getElementById ( ‘ff‘ ) ; var Oas = document.getElementById ( ‘alls‘ ) ; Oas.onclick=function(){ var Odiv = document.getElementsByTagName( ‘div‘ ) ; for(var i=0;i<Odiv.length;i++){ // Odiv[i].style.display="block"; Odiv[i].className=‘block-s‘ } } Oall.onclick=function(){ var Odiv = document.getElementsByTagName( ‘div‘ ) ; for(var i=0;i<Odiv.length;i++){ var a = Odiv[i].getAttribute(‘data-all‘); Odiv[i].className=‘block‘ if(a==‘all‘){ Odiv[i].className=‘block-s‘ } } } Oaff.onclick=function(){ var Odiv = document.getElementsByTagName( ‘div‘ ) ; for(var i=0 ; i<Odiv.length;i++){ var a = Odiv[i].getAttribute(‘data-all‘); Odiv[i].className=‘block‘ if(a==‘ff‘){ Odiv[i].className=‘block-s‘ } } }/** // 使用getAttribute获取 data- 属性 var user = document.getElementById ( ‘user‘ ) ; var userName =user.getAttribute ( ‘data-all‘ ) ; // userName = ‘愚人码头‘ var userId = user.getAttribute ( ‘uid‘ ) ; // userId = ‘12345‘ // 使用setAttribute设置 data- 属性 user . setAttribute ( ‘site‘ , ‘http://www.cnblogs.com/xinlinux/‘ ) ; alert(userName); */ </script></body></html>
Css3 javascript 写的分类
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。