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

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery页面右上角书页广告特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>页面右上角书页广告</title>
	<link rel="stylesheet" type="text/css" href="pagepeel.packed.css" />
    <script src="jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="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="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>

CSS代码(pagepeel.packed.css):

/** * X-Team Page Peel,v1.0 * * http://x-team.com/ * Copyright (c) 2009 X-Team */
.xteam-pagepeel{position:absolute;top:0;right:0;z-index:9999;}
.xteam-pagepeel img{border:0;}
.xteam-pagepeel img.peel{position:absolute;top:0;right:0;width:100px;height:104px;z-index:100;}
.xteam-pagepeel img.map{width:100%;height:100%;}
.xteam-pagepeel .back{position:absolute;top:0;right:0;width:100px;height:100px;}
.xteam-pagepeel .corner{z-index:0;}
.xteam-pagepeel .link{z-index:200;}
.xteam-pagepeel .peel-content{display:none;position:absolute;left:15px;bottom:27px;}
.xteam-pagepeel .peel-hint{display:block;position:absolute;left:5px;bottom:5px;}
.xteam-pagepeel.open .peel-content{display:block;}
.xteam-pagepeel.open .peel-hint{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)