CSS3過濾器實現圖片模糊與高亮顯示

2024-09-05 12:19:07

字體：大中小

來源：轉載

供稿：網友

jQuery與CSS3過濾器實現的圖片模糊與高亮顯示插件，插件基于jquery.tiltShift.js，兼容的瀏覽器：IE9/火狐、chrome、Safari、Opera等。IE8不支持。若運行正常可看到圖片中間是清淅的，四周是模糊的，像是高亮顯示一樣。

<!doctype html><head><title>使用CSS3過濾器制作圖片模糊與高亮顯示切換特效的jQuery插件</title><style>@import url(http://fonts.googleapis.com/css?family=Lato:300,700);html {    background: url(/jscss/demoimg/201403/roughcloth.png)}body {    font-family:'Lato', sans-serif;    color:#333;    text-shadow:0 1px 0 rgba(255,255,255,1);    line-height: 1.7;    font-size:18px;}.frame {    position:relative;    width:400px;    height:400px;    float:left;    margin:20px 40px 20px 0;    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);    border:5px solid white;}.tiltshift-layer {    -webkit-transition: opacity 0.5s ease-in-out;    transition: opacity 0.5s ease-in-out;    opacity:1;    cursor:pointer;}.frame:hover .tiltshift-layer {    opacity:0;}a {    color:#ed3314;    text-decoration: none;}.clear {    clear:both;}#main {	width:860px;	margin:0 auto;    overflow:visible;    padding-bottom:40px;    position:relative;}h1 {    font-size:56px;    margin:10px 0 0;}h2 {    border-bottom:1px solid rgba(0,0,0,0.2);    padding-bottom:5px;    margin:40px 0;}.social {    position:absolute;    top:0;    right:0;}#hover {    width:90px;    height:65px;    position:absolute;    top:60px;    background:url(/jscss/demoimg/201403/hover.png) no-repeat;    left: -120px;}.desc {    width:400px;    float:left;}.desc p:first-child {    margin-top:0;}.frame:nth-child(even) {    margin-right:0;}.avatar {    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);    border:5px solid white;    margin:0 20px 40px 0;    float:left;    height:80px;    width:80px;    clear: left;}code {    display:block;    background:rgba(0,0,0,0.05);    padding:10px;    font-size:15px;}.tiltshift-wrap {    display:inline-block;    position:relative;    overflow:hidden;}.tiltshift-layer {    position:absolute;    overflow:hidden;    top:0;    right:0;    bottom:0;    left:0;    background-repeat:no-repeat;    background-position:0 0;}</style><script src="/ajaxjs/jquery-1.9.1.min.js"></script><script>(function($) {    $.fn.tiltShift = function(options) {        $(this).each(function(){            var $this = $(this);            var $parent = $this.parent();            var s_position = $this.data('position');            var s_blur = $this.data('blur');            var s_focus = $this.data('focus');            var s_falloff = $this.data('falloff');            var s_direction = $this.data('direction');            // Setup DOM around Image (ugly but flexible)            var $wrap = $this.wrap('<div   id="iwvjtn8m0"   class="tiltshift-wrap" />').parent();            $wrap.prepend('<div   id="iwvjtn8m0"   class="tiltshift-before tiltshift-layer" />');            $wrap.append('<div   id="iwvjtn8m0"   class="tiltshift-after tiltshift-layer" />');            // Grab original image and assign to before & after            var src = $this.attr('src');            $parent.find('.tiltshift-layer').css('background-image', 'url(/jscss/demoimg/201403/' + src + ')');            // Set Blur            $parent.find('.tiltshift-layer').css({                '-webkit-filter': 'blur(' + s_blur + 'px) contrast(105%) saturate(105%)'            });            // Calculate Focus Boundaries (impacted by inFocus value)            var beforeEnd = ( s_position - ( s_focus / 2 ) ) / 100;            var afterEnd = ( ( 100 - s_position ) - ( s_focus / 2 ) ) / 100;            // Calculate Falloff Breakpoints (impacted by tightness value)            var beforeFall = ( ( beforeEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);            var afterFall = ( ( afterEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);            // Adjust back up to integers for gradient format            beforeEnd *= 100;            afterEnd *= 100;            // Set directional variables            var beforeDirection, afterDirection;            if ( s_direction === 'y' ) {                beforeDirection = '270deg';                afterDirection = '90deg';            } else if ( s_direction === 'x' ) {                beforeDirection = '180deg';                afterDirection = '0deg';            } else {                var angle = s_direction % 360;                beforeDirection = (angle + 180) + 'deg';                afterDirection = angle + 'deg';            }            // Apply Gradient Mask to Image Layers            $parent.find('.tiltshift-before').css({                '-webkit-mask-image' : '-webkit-linear-gradient(' + beforeDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + beforeFall + '%, rgba(0,0,0,0) ' + beforeEnd + '%)'            });            $parent.find('.tiltshift-after').css({                '-webkit-mask-image' : '-webkit-linear-gradient(' + afterDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + afterFall + '%, rgba(0,0,0,0) ' + afterEnd + '%)'            });        });    };})(jQuery);jQuery(document).ready(function() {     $('.tiltshift').tiltShift(); });</script></head><body><header><div style=" color:#000; width:600px;margin:0 auto; text-align:center; font-size:12px;"><p>適用瀏覽器：FireFox、Chrome、Safari</p></div>      </header>                <div   id="iwvjtn8m0"   class="frame">            <img src="/d/file/p/2024/09-05/d1a9bc7b13cc62c8c74af768f84a4216.jpg" class="tiltshift" data-position="55" data-blur="2" data-focus="15" data-falloff="10" data-direction="y" alt="See credits at bottom of page for Photograpger link">        </div>                <div   id="iwvjtn8m0"   class="frame">            <img src="/d/file/p/2024/09-05/d245e633ac388ea81f8e42a6065c5f77.jpg" class="tiltshift" data-position="70" data-blur="1" data-focus="10" data-falloff="20" data-direction="y" alt="See credits at bottom of page for Photograpger link">        </div>                <div   id="iwvjtn8m0"   class="frame">            <img src="/d/file/p/2024/09-05/abb7f7cf68e8f3639a37be1c9657cfde.jpg" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y" alt="See credits at bottom of page for Photograpger link">        </div>                <div   id="iwvjtn8m0"   class="frame">            <img src="/d/file/p/2024/09-05/421028b625dddbd59f2f895ae8ffb574.jpg" class="tiltshift" data-position="50" data-blur="2" data-focus="4" data-falloff="6" data-direction="x" alt="See credits at bottom of page for Photograpger link">        </div></article>    </body></html>

上一篇：判斷檢測瀏覽器是否支持HTML5相關屬性

下一篇：HTML5坦克大戰-網頁小游戲