不兼容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. 如何让Qt 的程序等待一段时间(等待的同时,还让主界面刷新图片)good

    后面这种方法可以不影响其他线程的响应,又可以达到等待的目的. 测试的一个小例子: class Widget : public QWidget { Q_OBJECT public: Widget(QWi ...

  2. java安全HTTPS工具类

    import java.io.FileInputStream; import java.security.KeyStore; import java.security.SecureRandom; im ...

  3. 【HDOJ】1134 Game of Connections

    Catlan数. /* 1134 */ import java.util.Scanner; import java.math.BigInteger; /* Catalan: (1) h(n) = h( ...

  4. Tuna项目总结

    从8.19—9.13日一共四周的时间,我在Tuna项目组进行的我的第一次正式工作,以及学习.在此,我对这个阶段的工作及学习进行一个总结,主要分为对流程的理解和对自动化测试的应用两个方面. 在总结着两点 ...

  5. 剑指offer---3

    1.反转单链表,输入链表的头节点,输出该链表,并输出反转后的头节点 这个题目不用再说了,写过N边了 SLnode reverse(SLnode head) { SLnode reverse_head ...

  6. c# WinForm开发 DataGridView各种操作总结大全

    一.单元格内容的操作 //取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Consol ...

  7. ButterKnife的使用

    ButterKnife是一个Android View注入的库. 1.开始使用 1.1 配置Eclipse 在使用ButterKnife需要先配置一下Eclipse. 项目右键-Properties-J ...

  8. AfxMessageBox和MessageBox差别

    假设用MFC的话,请尽量使用afxmessagebox,由于这个全局的对话框最安全,也最方便.   可是在WIN32 SDK的情况下仅仅能使用MESSAGEBOX. MessageBox()是Win3 ...

  9. redis-2.6.16源码分析之pub-sub系统

    redis实现的发送订阅系统,即pub-sub,这部分的的代码比较少,也方便分析.在这只将会分析下普通的pub-sub(会忽略掉Pattern-matching subscriptions),以此来简 ...

  10. AsyncTask两种线程池

        AsyncTask两种线程池  http://bbs.51cto.com/thread-1114378-1.html (API 3.0以后): 1.THREAD_POOL_EXECUTOR, ...