以下是 jquery内容模糊隐藏 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jquery内容模糊隐藏</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="reset" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/spoiler.js"></script>
<script>
$(function() {
$('spoiler').spoilerAlert()
$('.spoiler').spoilerAlert({max: 20, partial: 6})
})
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="index.html">SPOILER ALERT!</a></h1>
<p id="subtitle"><strong>Don't spoil it! Hide anything with a bit of blur.
Hint on mouseover. Reveal on click.</strong></p>
</div>
<div id="informations">
<ul>
<li>
<div class="group row">
<div class="col-1">
<h3>Works with images:</h3>
<p>This just in ... kittens are just so ...</p>
<p><img class="spoiler" src="images/280.jpg"></p>
</div>
<div class="col-2">
<h3>Works with copy:</h3>
<p>Sharon <spoiler>shoots Adama. It's really tragic. There's so
much blood. Haha.</spoiler> Classic Sharon!</p>
<p>Turns out Jesus <spoiler>dies, but is brought back to life.</spoiler>
A twist worthy of M Night Shamamanalayan!</p>
<p>On the Itchy & Scratchy CD-ROM, is there a way to get out of
the dungeon without using the wizard key? <spoiler>You have to
find the golden challice and invoke it three times.</spoiler>
What the hell are you talking about?</p>
<p>SPOILER ALERT <spoiler>Everybody dies eventually. I'm not
trying to be a pessimist or something, just, value life. Or
don't. </spoiler> But at least try to look surprised when you
reach the end.</p>
</div>
</div>
</li>
<li>
<div class="group row">
<div class="col-1">
<p>To make your site spoiler free, simply include spoiler.js.<br>
Then, add this somewhere:</p>
</div>
<div class="col-2">
<pre><code><span style="color: #e3d796;">$</span> ('spoiler, .spoiler').spoilerAlert()</code></pre>
</div>
</div>
</li>
<li>
<div class="group row">
<div class="col-1">
<p>To control the maximum and partial blurs, you can pass
arguments:</p>
</div>
<div class="col-2">
<pre><code><span style="color: #e3d796;">$</span> ('spoiler, .spoiler').spoilerAlert({max: 10, partial: 4})</code></pre>
</div>
</div>
</li>
<li>
<div class="group row">
<div class="col-1">
<p>Spoiler Alert! has been tested in Chrome, Firefox, Safari and
Mobile Safari. Let us know if you find any bugs!</p>
</div>
<div class="col-2 browser">
<img class="featurette-image" src="images/browser-icon-chrome.png">
<img class="featurette-image" src="images/browser-icon-firefox.png">
<img class="featurette-image" src="images/browser-icon-safari.png">
</div>
</div>
</li>
<li>
</li>
</ul>
</div>
</div>
</body>
</html>JS代码(spoiler.js):
(function( $ ){
var browser ={
}
browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase());
browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
var defaults ={
max:4,partial:2,hintText:'Click to reveal completely'}
var alertShown = false $.fn.spoilerAlert = function(opts){
opts = $.extend(defaults,opts ||{
}
) var maxBlur = opts.max var partialBlur = opts.partial var hintText = opts.hintText console.log(opts.max) if (!alertShown && browser.msie){
alert("WARNING,this site contains spoilers!") alertShown = true}
return this.each(function(){
var $spoiler = $(this) $spoiler.data('spoiler-state','shrouded') var animationTimer = null var currentBlur = maxBlur var cancelTimer = function(){
if (animationTimer){
clearTimeout(animationTimer) animationTimer = null}
}
var applyBlur = function(radius){
currentBlur = radius if (browser.msie){
// do nothing}
else if (browser.mozilla){
var filterValue = radius > 0 ? "url(\"data:image/svg+xml;
utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='" + radius + "' /></filter></svg>#blur\")":'' $spoiler.css('filter',filterValue)}
else{
var filterValue = radius > 0 ? 'blur('+radius+'px)':'' $spoiler.css('filter',filterValue) $spoiler.css('-webkit-filter',filterValue) $spoiler.css('-moz-filter',filterValue) $spoiler.css('-o-filter',filterValue) $spoiler.css('-ms-filter',filterValue)}
}
var performBlur = function(targetBlur,direction){
cancelTimer() if (currentBlur != targetBlur){
applyBlur(currentBlur + direction) animationTimer = setTimeout(function(){
performBlur(targetBlur,direction)}
,10)}
}
applyBlur(currentBlur) $(this).on('mouseover',function(e){
$spoiler.css('cursor','pointer') $spoiler.attr('title',hintText) if ($spoiler.data('spoiler-state') == 'shrouded') performBlur(partialBlur,-1)}
) $(this).on('mouseout',function(e){
if ($spoiler.data('spoiler-state') == 'shrouded') performBlur(maxBlur,1)}
) $(this).on('click',function(e){
if ($spoiler.data('spoiler-state') == 'shrouded'){
$spoiler.data('spoiler-state','revealed') $spoiler.attr('title','') $spoiler.css('cursor','auto') performBlur(0,-1)}
else{
$spoiler.data('spoiler-state','shrouded') $spoiler.attr('title',hintText) $spoiler.css('cursor','pointer') performBlur(partialBlur,1)}
}
)}
)}
;
}
)( jQuery );
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
