Css3 javascript 写的分类

不兼容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 写的分类的更多相关文章

HTML5&CSS3&JavaScript&PHP&MySQL学习笔记
1.在文字间添加一条水平线使用<hr /> 注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...
用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到是否蒙B了,如果是我面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...
JavaScript写在Html页面的<head></head>中
JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...
JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
javascript写在<head>和<body>里的区别
Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...
HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数
javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...
用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

随机推荐

完美解决VMware Workstation : Could not open /dev/vmmon: No such file or directory
root@tiger:/usr/bin# cd /etc/init.d root@tiger:/usr/bin# sudo mv /usr/lib/vmware/modules/binary /usr ...
COJ 0990 WZJ的数据结构（负十）
WZJ的数据结构(负十) 难度级别:D: 运行时间限制:5000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述给你一个N个节点的有根树,从1到N编号,根节点为1并给 ...
//string scriptstrs = "<script>alert('欢迎光临！');</script>";
//string scriptstrs = "<script>alert('欢迎光临!');</script>"; //if (!Page.ClientSc ...
B - Dining - poj 3281（最大流）
题目大意:有一群牛,还有一些牛喜欢的食物和喜欢的饮料,不过这些牛都很特别,他们不会与别的牛吃同一种食物或者饮料,现在约翰拿了一些食物和饮料,同时他也知道这些牛喜欢的食物和饮料的种类,求出来最多能让多少 ...
无需转化直接使用ESD映像文件安装系统简明教程
原版系统ISO镜像的sources文件夹中包含install.wim映像文件,将这个WIM文件“解压”(官方术语“Apply”)后,可以看到和C盘的目录完全相同,即为系统文件. 而官方提供的原版ESD ...
SKTextureAtlas类
继承自 NSObject 符合 NSCodingNSObject(NSObject) 框架 /System/Library/Frameworks/SpriteKit.framework 可用性可用 ...
JBoss 系列九十九：Rest WebService jBPM 6 集成演示样例
概述 jBPM 6 提供 Rest API 供第三方应用整合使用 jBPM 6,本文演示假设通过 Rest API: 启动流程获取流程实例信息启动 User Task 完毕 User Task j ...
表达式求值 (栈) 用C++实现
#include <cstdio> #include <cstdlib> #include <cmath> #include <stack> #incl ...
android 接听和挂断实现方式
参考:android 来电接听和挂断支持目前所有版本注意:android2.3版本及以上不支持下面的自动接听方法. (会抛异常:java.lang.SecurityException: Neith ...
linux配置时间同步
目标环境,5台linux centos 6.3, 一台作为NTPD服务与外部公共NTP服务同步时间,同时作为内网的NTPD服务器,其他机器与这台服务做时间同步. 服务器IP 角色说明同步方式 ...

Css3 javascript 写的分类

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

随机推荐

热门专题