不兼容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. Delphi 缩放图像代码 - 支持PNG透明通道（利用了Windows的windowscodecs.dll）

    要求Delphi2007或者更高版本, 系统要求至少XP-SP2以上 实际上是利用了Windows的windowscodecs.dll这个文件的功能 在VCL里已经封装为TWICImage类 proc ...

  2. 驱动里执行应用层代码之KeUserModeCallBack（WOW64是由三个动态库wow64.dll wow64win.dll wow64cpu.dll来实现）

    在驱动层(ring0)里执行应用层(ring3)代码,这是个老生常谈的技术,而且方法也挺多. 这种技术的本质:其实就是想方设法在驱动层里把应用层代码弄到应用层去执行. 比如在APC异步调用中,KeIn ...

  3. SQL 2008 如何配置远程连接

    初次接触sql2008 相比05 改观还是挺大的 在配置方面 如何打开"远程连接" 成了最棘手的   到网上找了大半天资料    依然云里雾里 参考网上的众多资料 结合本人的实际经 ...

  4. Best Time to Buy and Sell Stock II ——LeetCode

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  5. Sublime一些设置

    很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直在搜索,无果. ...

  6. 使用Windows驱动的虚拟打印机，打印Excel表格无表格线问题解决（2）

    测试: 经前天的测试,最终还是没有明显的定夺到底是驱动的问题,还是打印机的问题.但是按照可能性来排查,最明显的一点就是其他测试环境不变的情况下增加一张图片,就可以打印出表格线,我始终觉得这里是突破点, ...

  7. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...

  8. javascript表单行为效果展示

    效果如下 以上效果是在点击下一步的时候触发的效果显示 代码如下 ////加工厂$(function() { $("#planttwo").click(function () { v ...

  9. Object -C NSValue -- 笔记

    // //  main.m //  NSValue // //  Created by facial on 26/8/15. //  Copyright (c) 2015 facial_huo. Al ...

  10. Genymotion模拟器一滑动页面就跳到搜索003

    今天郁闷的要死,好不容易让Appium关联起Genymotion了,但是一滑动屏幕就跳转到搜索003界面,当时还以为是Appium的Bug或者Genymotion本身出问题了. 结果网上搜了一段时间( ...