小麦子 发表于 2024-11-2 13:32:10

jQuery页面右上角书页广告特效




以上只是部份演示图片，详细可以付费购买。

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>页面右上角书页广告</title>
        <link rel="stylesheet" type="text/css" href="//xcdn.php.cn/js/ads/jQuery页面右上角书页广告特效/pagepeel.packed.css" />
    <script src="//xcdn.php.cn/js/ads/jQuery页面右上角书页广告特效/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="//xcdn.php.cn/js/ads/jQuery页面右上角书页广告特效/pagepeel-jquery.js"></script>
    <style type="text/css">
      body {
            padding:1em; margin:0;
            background: #ccc;
            color: #333;
      }      
      .xteam-pagepeel img.peel {
              width: 75px;
              height: 79px;
      }
      
      
                .xteam-pagepeel .back {
                        width: 75px;
                        height: 75px;
                }
      
      .xteam-pagepeel .corner {
              background-repeat: no-repeat;              
              background-image: url(note-revealed.png);
              background-position: top right;
      }
      
      .xteam-pagepeel .peel-hint {
              color: #333333;
              border: none;
              font-family: monospace;
              font-size: 2em;
      }
      
      .xteam-pagepeel .peel-content .action {
              color: #333333;
      }
      
      .xteam-pagepeel .peel-content .close {
              display: none;
      }
      
      .xteam-pagepeel.full .peel-content .close {
              display: inherit;
      }
      
    </style>
</head>
<body>

        <div id="pagepeel" class="xteam-pagepeel">
                <span class="peel">
                        <map name="peelmap">
                                <area shape="poly" coords="0,0,614,0,614,614,0,0" title="Go!" href="#" class="peel-hotzone" />
                        </map>
                        <img src="//xcdn.php.cn/js/ads/jQuery页面右上角书页广告特效/page-peel.png" alt="" class="peel" />
                        <span class="back corner"></span>
                        <span class="back link">
                                <img src="trans.gif" alt="" class="map" usemap="#peelmap" />
                                <span class="peel-content">
                                        <form>
                                                <button type="button" class="close">Close</button>
                                        </form>
                                </span>
                        </span>
                </span>
        </div>

        <h1>X-Team PagePeel, v1.0</h1>
        <script type="text/javascript">
                var peel = new Xteam.Ui.PagePeel('#pagepeel');               
        </script>
</body>
</html>

以上代码中的图片和JS，请下载到自己网站目录中使用！

314782214yy 发表于 2024-11-16 23:35:19

这个行，我来试试
页: [1]
查看完整版本: jQuery页面右上角书页广告特效