0

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

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

只是默认叠加我需要将画廊名称作为叠加层，真的很喜欢这个插件的效果，但对其他插件的建议持开放态度。

4

1 回答 1

0

来源：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>
于 2012-06-16T04:34:48.937 回答