jQuery插件Obfuscate Image实现图片遮罩隐藏效果及原理分析

使用jQuery插件Obfuscate Image实现一个加载页面后遮罩图片，当点击遮罩背景后显示图片，简单来说就是先把图片隐藏起来，然后点击图片区域再把图片显示出来，效果图如下：


一，jQuery插件Obfuscate Image使用实例
使用说明
需要使用jQuery库文件和Obfuscate Image库文件 [在线演示]

可自定义图片遮罩CSS样式，如：

  1. <style>
  2. .test{color:white;}
  3. </style>

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.obfuscate_image.js"></script>

二，HTML部分

  1. <img src="test.png" class="test"/>

三，javascript部分

  1. <script type="text/javascript">
  2. <!--
  3. jQuery(document).ready(function(){
  4. jQuery(".test").obfuscate_image({
  5. message:"点击查看图片",
  6. classname:"test",
  7. bgcolor:"#666"
  8. });
  9. });
  10. //-->
  11. </script>

Obfuscate Image插件有三个参数，分别如下：
1，message表示遮罩层提示文字
2，classname表示遮罩层提示文字CSS样式
3，bgcolor表示遮罩层背景

上面实例遮罩类名为test的图片，并有相关提示。

二，jQuery插件Obfuscate Image图片遮罩隐藏效果实现原理

实现图片遮罩效果与我们遮罩全页面的原理是一样的，实现原理如下：

1，包裹图片元素，把图片元素包裹在一个DIV层中，并隐藏图片，如：<div></div>
2，在DIV层中增加自定义元素，如：提示文字
3，给创建的DIV层增加CSS样式，如：背景等
4，绑定事件，如插件中隐藏遮罩背景，并显示图片

jQuery插件Obfuscate Image库文件如下：

  1. jQuery.fn.obfuscate_image = function(options) {
  2. var defaults = {
  3. message : 'Please click here to view image.',
  4. classname : 'obfuscate_text',
  5. bgcolor : '#CCC'
  6. };
  7. var options = jQuery.extend(defaults, options);
  8. return this.each(function(){
  9. var $img = $(this);
  10. var size = {
  11. width : $img.attr('width'),
  12. height : $img.attr('height')
  13. };
  14. $img.wrap('<div></div>').hide();
  15. $img.before('<p class="' + options.classname + '">' + options.message + '</p>');
  16. var $cont = $img.parent();
  17. var $msg = $img.prev('p');
  18. $msg.css({
  19. 'padding-top' : (size.height / 8) + 'px',
  20. 'text-align' : 'center'
  21. });
  22. $cont.css({'background-color' : options.bgcolor,
  23. 'width' : size.width,
  24. 'height' : size.height,
  25. 'cursor' : 'pointer'})
  26. .click( function () { $msg.hide(); $img.fadeIn(); });
  27. });
  28. }

了解遮罩原理对于制作交互效果非常实用，如弹出框等，学会使用jQuery插件Obfuscate Image实现图片遮罩的同时，对于掌握遮罩原理将更加实用。

点我查看jQuery插件Obfuscate Image实现图片遮罩隐藏效果在线演示

共有0个回答