不兼容IE10以下的浏览器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta  charset=utf->
  5. <title>Css3分类</title>
  6.  
  7. <style>
  8.  
  9.     *{margin:0px;padding:0px;border:0px;}
  10.     body{font-size:12px}
  11.     a{color:#; text-decoration:none;}
  12.     a:hover{color:#FF0000; text-decoration:none;}
  13.     input{
  14.         background:#fff;
  15.         border:1px solid #ccc;
  16.         padding:10px;
  17.         width: 60px;
  18.     }
  19.     div{
  20.  
  21.         font-size: 14px;
  22.         color: #;
  23.         width: 235px;
  24.         background: #;
  25.         margin: 5px;
  26.         padding: 10px;
  27.         float:left;
  28.         overflow:hidden;
  29.         color: #fff;
  30.         height: 234px;
  31.  
  32.         -webkit-transition: all .7s ease-in-out;
  33.         -moz-transition: all .7s ease-in-out;
  34.         -o-transition: all .7s ease-in-out;
  35.         -ms-transition: all .7s ease-in-out;
  36.         transition: all .7s ease-in-out;
  37.  
  38.     }
  39.  
  40.     img{
  41.         width:%;
  42.         height:%;
  43.         -webkit-transition: all .5s linear;
  44.         -moz-transition: all .5s linear;
  45.         -o-transition: all .5s linear;
  46.         -ms-transition: all .5s linear;
  47.         transition: all .5s linear;
  48.     }
  49.  
  50.     div img:hover{
  51.  
  52.         transform: scale();
  53.         -webkit-transform: scale();
  54.  
  55.     }
  56.  
  57.     .block{
  58.         -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  59.         filter: alpha(opacity=);
  60.         opacity: ;
  61.         width: ;
  62.         padding: ;
  63.         margin: ;
  64.  
  65.     }
  66.  
  67.     .block-s{
  68.         -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
  69.         filter: alpha(opacity=);
  70.         opacity: ;
  71.     }
  72.  
  73. </style>
  74. </head>
  75. <body>
  76.  
  77. <input type="button" id='alls'  value="全部"/>
  78. <input type="button" id='all'  value="人物"/>
  79. <input type="button" id='ff'  value="风景"/>
  80.  
  81. <br/>
  82. <br/>
  83.  
  84. <div data-all='all'><img src="http://pic21.nipic.com/20120614/9662903_195628630177_2.jpg"/></div>
  85. <div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/7.jpg"/></div>
  86. <div data-all='all'><img src="http://www.template-guide.com/preview/5309/images/portfolio/1.jpg"/></div>
  87. <div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/5.jpg"/></div>
  88. <div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/6.jpg"/></div>
  89. <div data-all='all'><img src="http://www.template-guide.com/preview/5309/images/portfolio/3.jpg"/></div>
  90. <div data-all='all'><img src="http://www.template-guide.com/preview/5309/images/portfolio/4.jpg"/></div>
  91.  
  92. <script>
  93.  
  94.     var Oall = document.getElementById ( 'all' ) ;
  95.     var Oaff = document.getElementById ( 'ff' ) ;
  96.     var Oas = document.getElementById ( 'alls' ) ;
  97.  
  98.     Oas.onclick=function(){
  99.  
  100.         var Odiv = document.getElementsByTagName( 'div' ) ;
  101.  
  102.         for(var i=;i<Odiv.length;i++){
  103.  
  104.             //    Odiv[i].style.display="block";
  105.             Odiv[i].className='block-s'
  106.  
  107.         }
  108.  
  109.     }
  110.  
  111.     Oall.onclick=function(){
  112.  
  113.         var Odiv = document.getElementsByTagName( 'div' ) ;
  114.  
  115.         for(var i=;i<Odiv.length;i++){
  116.  
  117.             var a = Odiv[i].getAttribute('data-all');
  118.  
  119.             Odiv[i].className='block'
  120.  
  121.             if(a=='all'){
  122.  
  123.                 Odiv[i].className='block-s'
  124.  
  125.             }
  126.  
  127.         }
  128.  
  129.     }
  130.  
  131.     Oaff.onclick=function(){
  132.  
  133.         var Odiv = document.getElementsByTagName( 'div' ) ;
  134.  
  135.         for(var i= ; i<Odiv.length;i++){
  136.  
  137.             var a = Odiv[i].getAttribute('data-all');
  138.  
  139.             Odiv[i].className='block'
  140.  
  141.             if(a=='ff'){
  142.  
  143.                 Odiv[i].className='block-s'
  144.  
  145.             }
  146.  
  147.         }
  148.  
  149.     }
  150.  
  151. /**
  152.  
  153.     // 使用getAttribute获取 data- 属性
  154.     var user = document.getElementById ( 'user' ) ;
  155.     var userName =user.getAttribute ( 'data-all' ) ; // userName = '愚人码头'
  156.     var userId = user.getAttribute ( 'uid' ) ; // userId = '12345'
  157.  
  158.     // 使用setAttribute设置 data- 属性
  159.     user . setAttribute ( 'site' , 'http://www.cnblogs.com/xinlinux/' ) ;
  160.  
  161.     alert(userName);
  162.  
  163. */
  164.  
  165. </script>
  166.  
  167. </body>
  168. </html>

Css3 javascript 写的分类的更多相关文章

  1. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  2. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  3. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  4. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  5. javascript写在<head>和<body>里的区别

    Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...

  6. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  7. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  8. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  9. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

随机推荐

  1. 对WM_NCHITTEST消息的了解+代码实例进行演示（消息产生消息，共24个枚举值）

    这个消息比较实用也很关键,它代表非显示区域命中测试.这个消息优先于所有其他的显示区域和非显示区域鼠标消息.其中lParam参数含有鼠标位置的x和y屏幕坐标,wParam 这里没有用. Windows应 ...

  2. 「Poetize10」封印一击

    描述 Description Nescafe由n种元素组成(编号为1~n), 第i种元素有一个封印区间[ai,bi].当封印力度E小于ai时,该元素将获得ai的封印能量:当封印力度E在ai到bi之间时 ...

  3. 输入一个单向链表，输出该链表中倒数第K个结点

    输入一个单向链表,输出该链表中倒数第K个结点,具体实现如下: #include <iostream> using namespace std; struct LinkNode { publ ...

  4. UVA 327 -Evaluating Simple C Expressions(栈）

    Evaluating Simple C Expressions The task in this problem is to evaluate a sequence of simple C expre ...

  5. [转载]Android开发必备的21个免费资源和工具

    转载自: http://blog.csdn.net/shimiso/article/details/6788375 Android移动开发平台现在不是一个“火”字能形容的,今年Android平台在市场 ...

  6. 搭建完整邮件系统(postfix+dovecot+clamAV+Spamassassin+amavisd-new)

    ============================ 相关软件: 1. 发送邮件 --- postfix 2. 身份认证 --- sasl2 3. 接收邮件 --- dovecot 4. 防病毒邮 ...

  7. FLEX 图片拷贝

    在用FLEX做GIS相关的开发的时候,遇到一个问题.因为是监控类的系统,所以需要要求地图上的ICON的实时更新,从而会出现重复加载的情况.就是重复请求相同的图片用做背景,尤其是在加载的ICON较多的时 ...

  8. 使用一个小图片tile平铺到ImageView中或Activity背景

    方法两种: 首先必须在res/drawable目录下包含一个background.jpg 方法1:在res/drawable中创建一个xml文件(background_repeat.xml) 内容为 ...

  9. Android（java）学习笔记259：JNI之NDK开发步骤

    1. NDK开发步骤(回忆一下HelloWorld案例): (1)创建工程 (2)定义native方法 (3)创建jni文件夹 (4)创建c源文件放到jni文件夹 (5)拷贝jni.h头文件到jni目 ...

  10. codevs 1173 最优贸易（DP+SPFA运用）

    /* 中国的题目 ——贱买贵卖 0.0 这题wa了好多遍 第一遍看着题 哎呀这不很简单嘛 从起点能到的点都是合法的点 然后统计合法的点里最大最小值 然后printf 也不知道哪里来的自信 就这么交了 ...