热线电话: 4006-123-892
jquery右上角双层撕角广告代码

资源上传者:choaloo

下载所需能力币:1

资源下载总次数:0

资源上传时间:2016-06-10 11:58

jquery右上角双层撕角广告代码

非常实用,而且安装简单的右上角双层撕角jquery插件代码。

展示的效果如截图,将鼠标防止在右上角时撕掉第一层,点击翻卷过来的页角,再撕掉1层,比较实用。

安装起来也很简单:

1、将js文件包含进来,如下:

<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、将必要的标签添加到你的页面上去,如下:
<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、初始化插件,如下:

<script type="text/javascript">
    var peel = new Xteam.Ui.PagePeel('#pagepeel');      
</script>
4、如果你希望展示更加个性化一些,可以明确一些参数,如下:

<script type="text/javascript">
    var peel = new Xteam.Ui.PagePeel('#pagepeel', {
        fullOpenOnClick: true,
        fullOpenIsSticky: true,
        fullOpenCloseOnBodyClick: true
    });     
</script>

联系在线客服
免费成为开发商,接单做软件外包项目不收取佣金,且无限量投标竞价