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

随机推荐

spring framework 4 源码阅读
前面写了几篇spring 的介绍文章,感觉与主题不是很切合.重新整理下思路,从更容易理解的角度来写下文章. spring 的骨架 spring 的骨架,也是spring 的核心包.主要包含三个内容 1 ...
【转】显示Ubuntu文件浏览器的地址栏--不错
原文网址:http://www.blogbus.com/anythingok-logs/144447448.html Ubuntu默认使用nautilus作为其可视化的文件浏览器,其默认值不显示地址栏 ...
Silverlight分享一套企业开发主题
Silverlight分享一套企业开发主题 Silverlight默认主题时间长了,也视觉疲劳了,于是上网上找了下Silverlight主题.发现SL的主题并不多,下面这套JetPack主题还是SL4 ...
Do's and Don'ts for Android development
Do's and Don'ts for Android development, by Futurice developers Use Gradle and its recommended proje ...
Alert Views
Alert views display a concise and informative alert message to the user. Alert views convey importan ...
@Query注解的用法(Spring Data JPA)
参考文章:http://www.tuicool.com/articles/jQJBNv 1. 一个使用@Query注解的简单例子 @Query(value = "select name,au ...
我与Ubuntu的5年共成长
初次接触Ubuntu那还是2010年的初夏,那年大学二年级即将结束,为了增加计算机学院学生的技术能力和就业竞争力,学校组织了很多培训机构.公司企业来学校做技术宣讲.分享等记得有一个企业是做Mp3 M ...
Android Toast 提示按两次返回键退出
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceS ...
基于Android Volley的网络请求工具
基于Android Volley的网络请求工具. 一.说明 AndroidVolley,Android Volley核心库及扩展工程.AndroidVolleySample,网络请求工具示例工程.Re ...
css08盒子模型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

Css3 javascript 写的分类

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

随机推荐

热门专题