Show me the money!

X-Team PagePeel, v1.0

Demo/Instructions

This component achieves a smooth graphic "peeling" effect on a page corner, without the use of Flash.

The Peel itself, and the revealed content is simply HTML and Images

Implementation is very simple.

  1. Include the Script and Stylesheet references
    <link rel="stylesheet" type="text/css" href="pagepeel.packed.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="pagepeel-jquery.js"></script>
  2. Add the required markup to your page.
    <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="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">
                    <!-- Your HTML Content Goes here -->
                </span>
            </span>
        </span>
    </div>
  3. Instantiate the PagePeel component.
    <script type="text/javascript">
        var peel = new Xteam.Ui.PagePeel('#pagepeel');      
    </script>
  4. Specify options for your PagePeel (optional).
    The following shows the options set to their default values
    <script type="text/javascript">
        var peel = new Xteam.Ui.PagePeel('#pagepeel', {
            fullOpenOnClick: true,
            fullOpenIsSticky: true,
            fullOpenCloseOnBodyClick: true
        });     
    </script>

jquery广告特效代码 右上角双层撕页广告效果 [源码下载][使用帮助]

代码整理:酷站代码,转载请注明出处。 本代码仅限于学习交流,请勿用于商业用途!