Question

我最近遇到了一个令人兴奋的jquery插件，用于图像叠加http://jobyj.in/adipoli/ 它说它有一个文本覆盖功能，但我无法弄清楚它是如何工作的，任何人都有一个有效的例子。

    <script>
  $('.hover').adipoli({
      'overlayText' : 'overlayText'
  });

只是默认覆盖我需要将图库名称作为叠加层真的像这个插件的效果，但开放给其他插件的建议。

Answer 1

资料来源：jquery.adipoli.js

行：64

//...
else if (settings.startEffect == "overlay") {
    element = $(this);
    element.hide();
    $(this).siblings('.adipoli-before').html(settings.overlayText).css({
//...

因此，为了启用settings.overlayText，settings.startEffect必须等于overlay。这将为您提供......

的工作叠加演示的示例代码

    $(function(){
        $('.hover').adipoli({
            'overlayText' : '<b>overLayText</b>',
            'startEffect' : 'overlay',
            'hoverEffect' : 'popout'
        });
    });

现场演示：http://jsfiddle.net/tzE4V/2/

完整的JSfiddle.net演示源：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="http://jobyj.in/adipoli/css/adipoli.css" rel="stylesheet" type="text/css"/>

    <body>
      <p id="hello">Hello World</p>
      <img class="img-style row1" src="http://jobyj.in/adipoli/img/gallery-images/1_1.png"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="http://jobyj.in/adipoli/js/jquery.adipoli.min.js"></script>
      <script type="text/javascript">
        $(function(){
            $('.row1').adipoli({
          'overlayText' : '<b>overLayText</b>',
                'startEffect' : 'overlay',
                'hoverEffect' : 'popout'
            });
        });
      </script>
    </body>
  </head>
</html>

Adipoli插件过度文字

1 个答案: