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来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

随机推荐

Silverlight 中 TreeView 的数据绑定
方法一:Silverlight使用XAML标记语言来编写,如果不使用XAML强大的绑定功能,实在是罪过.通过使用绑定,可以将UI与视图模型层分离,有利于系统的维护.作为Silverlight中比较有代 ...
How to make onActivityResult get called on Nested Fragment
One of the common problem we always meet in the world of Fragment is: although we could callstartAct ...
将多个图片整合到一张图片中再用CSS 进行网页背景定位
原文地址:http://wenku.baidu.com/link?url=hj_qM9kmdMrg8KWXFD2bCF_uuJCxKJRvG97CkWk3itsPq3izMzfrKvSZYBzDGyP ...
Mac 下 Scala 平台搭建
1.先要安装 JDK,下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...
[Design Pattern] Iterator Pattern 简单案例
Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...
oracle锁表解决方法
SQL> select session_id from v$locked_object; SESSION_ID----------142 SQL> SELECT sid, serial#, ...
DateGradeView分页绑定
<form method="post" id="nform" runat="server"> < ...
Windows Live Writer Install Faied
win7安装Windows Live Writer软件时失败,并且提示错误代码0x80190194的问题 Windows Live Writer是一个很好的博客写作工具,单机就可以使用了,还可以用于同 ...
JQuery属性过滤(转)
属性过滤(Attribute Filters)的内容就是html元素中的属性其包括以下几个选择器: [attribute] [attribute=value] [attribute!=value] ...
iOS UIImage扩展方法(category):放大、旋转、合并UIImage、增加渐变层、添加阴影、调节透明度、保存到相册
一有用的 UIImage 扩展,支持(等比例)放大和旋转可在许多 App 中使用. UIImage-Extensions.h #import <Foundation/Foundation.h&g ...

Css3 javascript 写的分类

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

随机推荐

热门专题