HTML5滤镜效果demo

原水小子

浏览: 233760 次
性别:
来自: 济南

最近访客更多访客>>

春隆隆

小白白白

空空大师111

why981229

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
HTML
JS

html5 css3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @-webkit-keyframes testAnim {
            0% {-webkit-filter: grayscale(0.5) blur(1px) saturate(2);}
            100% {-webkit-filter: grayscale(0.2) blur(6px) saturate(9);}
        }

        /*IE,FF暂不支持*/
        @-moz-keyframes testAnim {
            0% {-moz-filter: grayscale(0.5) blur(1px) saturate(2);}
            100% {-moz-filter: grayscale(0.2) blur(6px) saturate(9);}
        }

        @-ms-keyframes testAnim {
            0% {-ms-filter: grayscale(0.5) blur(1px) saturate(2);}
            100% {-ms-filter: grayscale(0.2) blur(6px) saturate(9); }
        }

        @keyframes testAnim {
            0% {filter: grayscale(0.5) blur(1px) saturate(2);}
            100% {filter: grayscale(0.2) blur(6px) saturate(9);}
        }

        #animatePhoto {}
        .animatePhoto:hover,#animatePhoto:hover{
            -webkit-animation-name: testAnim;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-delay: 0s;

            /*IE,FF暂不支持*/
            -moz-animation-name: testAnim;
            -moz-animation-duration: 2s;
            -moz-animation-iteration-count: 1;
            -moz-animation-direction: alternate;
            -moz-animation-timing-function: ease-out;
            -moz-animation-fill-mode: forwards;
            -moz-animation-delay: 0s;

            -ms-animation-name: testAnim;
            -ms-animation-duration: 2s;
            -ms-animation-iteration-count: 1;
            -ms-animation-direction: alternate;
            -ms-animation-timing-function: ease-out;
            -ms-animation-fill-mode: forwards;
            -ms-animation-delay: 0s;

            animation-name: testAnim;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
            animation-delay: 0s;
        }
        .l,.r{ width:40%; float:left; padding:40px;}
    </style>
</head>
<body>
    <div class="l">
        <h3>图片滤镜特效试验</h3>
        <img id="fxPhoto" src="http://avatar.csdn.net/A/7/9/1_damys.jpg" />
        <div id="sliderContainer"></div>
    </div>

    <div class="r">
        <h3>图片滤镜特效试验：hover</h3>
        <img id="animatePhoto" class="animatePhoto" src="http://avatar.csdn.net/A/7/9/1_damys.jpg" />
    </div>
    <script type="text/javascript">
        var photo = document.querySelector("#fxPhoto");
        var filters = [
            { name: "grayscale", cname: "黑白照片(灰度级)效果", def: "0", unit: "", min:0 , max:1.0, step: "0.01" },
            { name: "blur", cname: "模糊效果", def: "0", unit: "px", min: 0, max: 10 , step: "1"},
            { name: "sepia", cname: "老照片(褐黄色)效果", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"},
            { name: "saturate", cname: "饱和度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
            { name: "opacity", cname: "透明度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
            { name: "brightness", cname: "亮度调整", def: "1", unit: "", min: 0, max: 1.0 , step: "0.01"},
            { name: "contrast", cname: "对比度调整", def: "1", unit: "", min: 0, max: 1 , step: "0.01"},
            { name: "hue-rotate", cname: "色调调整", def: "0", unit: "deg", min: 0, max: 360 , step: "1"},
            { name: "invert", cname: "色彩反相", def: "0", unit: "", min: 0, max: 1.0 , step: "0.01"}
        ];

        // Change event
        function onChange() {
            var cssString = "";

            filters.forEach(function(n,i) {
                var value = document.querySelector('#'+n.name).value;
                // Update the value title
                document.querySelector('#title_'+n.name).innerHTML = "<h3>" + n.cname + "(" + n.name + ":" +value + n.unit + ")</h3>";

                // Update CSS string
                cssString += " " + n.name + "(" + value + n.unit + ")";
            });
            photo.style["-webkit-filter" ]= cssString;
        }
        HTMLElement.prototype.appendHTML = function(html) {
            var divTemp = document.createElement("div"), nodes = null
            // 文档片段，一次性append，提高性能
                    , fragment = document.createDocumentFragment();
            divTemp.innerHTML = html;
            nodes = divTemp.childNodes;
            for (var i=0, length=nodes.length; i<length; i+=1) {
                fragment.appendChild(nodes[i].cloneNode(true));
            }
            this.appendChild(fragment);
            // 据说下面这样子世界会更清净
            nodes = null;
            fragment = null;
        };
        // For every filter
        var container = document.querySelector("#sliderContainer");

        filters.forEach(function(n) {
            container.appendHTML("<p id='title_"+n.name+"'>"+n.cname+"</p>");
            container.appendHTML("<input onChange='onChange()' value='"+n.def+"' type='range' id='"+n.name+"' min='"+n.min+"' max='"+n.max+"' step='"+n.step+"'>");
        });

        onChange();
    </script>
</body>
</html>

分享到：

nodejs实现web服务实例 | 纯JS为DOM添加html字符串：appendHTML方法 ...

2015-03-31 17:32
浏览 741
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5滤镜效果demo

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5滤镜效果demo

评论

发表评论

相关推荐

让页面滑动流畅得飞起来的新特性：Passive Event Listeners

求多个数组的每一项互相拼接（多个产品属性组合）

js伪数组元素转成数组的方法详解

html元素永远点不到···

FullPage.js的使用方法和设置

html5计算器html5Calculator.html

详解IE11/chrome/firefox浏览器下Navigator各属性

js跨域调http接口（jsonp）

HTML可拖拽模拟对话框

判断电脑是否联网

DOM元素 onScrollToBottom监听示例

HTML5 FileReader用法：图片预览、文本文件预览等

纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法

CSS3改变浏览器滚动条

IE6/IE7/IE8下float:right显示异常的解决方法

实用的 Javascript 技巧

js querySelector和getElementById通过id获取元素的区别

JS判断浏览器类型与版本

js onkeypress与onkeydown 事件区别详细说明

jquery的data()方法与html5中DOM标签的dataset属性异同

最近访客更多访客>>