不兼容IE10以下的浏览器

<!DOCTYPE html>

<html>

<head>

<meta  charset=utf->

<title>Css3分类</title>

<style>

    *{margin:0px;padding:0px;border:0px;}

    body{font-size:12px}

    a{color:#; 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: #;

        width: 235px;

        background: #;

        margin: 5px;

        padding: 10px;

        float:left;

        overflow:hidden;

        color: #fff;

        height: 234px;

        -webkit-transition: all .7s ease-in-out;

        -moz-transition: all .7s ease-in-out;

        -o-transition: all .7s ease-in-out;

        -ms-transition: all .7s ease-in-out;

        transition: all .7s ease-in-out;

    }

    img{

        width:%;

        height:%;

        -webkit-transition: all .5s linear;

        -moz-transition: all .5s linear;

        -o-transition: all .5s linear;

        -ms-transition: all .5s linear;

        transition: all .5s linear;

    }

    div img:hover{

        transform: scale();

        -webkit-transform: scale();

    }

    .block{

        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

        filter: alpha(opacity=);

        opacity: ;

        width: ;

        padding: ;

        margin: ;

    }

    .block-s{

        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";

        filter: alpha(opacity=);

        opacity: ;

    }

</style>

</head>

<body>

<input type="button" id='alls'  value="全部"/>

<input type="button" id='all'  value="人物"/>

<input type="button" id='ff'  value="风景"/>

<br/>

<br/>

<div data-all='all'><img src="http://pic21.nipic.com/20120614/9662903_195628630177_2.jpg"/></div>

<div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/7.jpg"/></div>

<div data-all='all'><img src="http://www.template-guide.com/preview/5309/images/portfolio/1.jpg"/></div>

<div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/5.jpg"/></div>

<div data-all='ff'><img src="http://www.template-guide.com/preview/5309/images/portfolio/6.jpg"/></div>

<div data-all='all'><img src="http://www.template-guide.com/preview/5309/images/portfolio/3.jpg"/></div>

<div data-all='all'><img src="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=;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=;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= ; 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 写的分类的更多相关文章

  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. Google 高性能 RPC 框架 gRPC 1.0.0 发布（附精彩评论）

    gRPC是一个高性能.开源.通用的RPC框架,面向移动和HTTP/2设计,是由谷歌发布的首款基于Protocol Buffers的RPC框架. gRPC基于HTTP/2标准设计,带来诸如双向流.流控. ...

  2. SlidingMenu和ActionBarSherlock结合滑动式菜单都

    https://github.com/jfeinstein10/SlidingMenu http://actionbarsherlock.com/ SlidingMenu 的demo工程引用了Acti ...

  3. 14.4.1 Buffer Pool

    14.4.1 Buffer Pool buffer pool 是一个主人的内存区域 InnoDB caches 表和index 数据. buffer pool 允许经常访问的数据直接从内存里处理,加快 ...

  4. POJ3436 ACM Computer Factory(最大流)

    题目链接. 分析: 题意很难懂. 大体是这样的:给每个点的具体情况,1.容量 2.进入状态 3.出去状态.求最大流. 因为有很多点,所以如果一个点的出去状态满足另一个点的进入状态,则这两个点可以连一条 ...

  5. SQL Standard Based Hive Authorization（基于SQL标准的Hive授权）

    说明:该文档翻译/整理于Hive官方文档https://cwiki.apache.org/confluence/display/Hive/SQL+Standard+Based+Hive+Authori ...

  6. Delphi实现AnsiString与WideString的转换函数 转

    Delphi实现AnsiString与WideString的转换函数 分类: Delphi2013-01-26 16:23 460人阅读 评论(0) 收藏 举报 [delphi] view plain ...

  7. Mustache.js语法学习笔记

    原文地址:http://www.cnblogs.com/flypig88/archive/2012/05/14/2497780.html 看了Mustache的github,学学其中的语法,做个笔记 ...

  8. [Data Structure] 二叉搜索树(Binary Search Tree) - 笔记

    1. 二叉搜索树,可以用作字典,或者优先队列. 2. 根节点 root 是树结构里面唯一一个其父节点为空的节点. 3. 二叉树搜索树的属性: 假设 x 是二叉搜索树的一个节点.如果 y 是 x 左子树 ...

  9. mount 远程挂载Nfs

    服务器:192.168.20.204 客户端:192.168.20.203 1. 在服务器配置/etc/export 添加可以共享的文件夹和允许的客户端地址 /home/dir 192.168.20. ...

  10. node.js环境配置（angularjs高级程序设计中出现的错误）

    一:npm install connect会出现错误:解决方法 1:$ npm install connect@2.X.X 2:$ npm install serve-static: 建立server ...