利用jquery实现内容模糊隐藏



17 66 23



特效描述:利用jquery实现 内容模糊 隐藏,利用jquery实现内容模糊隐藏

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="reset" />

2. 引入JS

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/spoiler.js"></script>

3. HTML代码

  <div id="wrap">
    <div id="header">
      <h1><a href="index.html">SPOILER ALERT!</a></h1>
      <p id="subtitle"><strong>Don&#39;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&#39;s really tragic. There&#39;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 &amp; 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&#39;m not 
				trying to be a pessimist or something, just, value life. Or 
				don&#39;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> (&#39;spoiler, .spoiler&#39;).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> (&#39;spoiler, .spoiler&#39;).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>
<div style="text-align:center;clear:both">
</div>  



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到