jQuery带阴影的撕页广告代码
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css带阴影的撕页广告效果</title>
<link href="//xcdn.php.cn/js/ads/jQuery带阴影的撕页广告代码/css/styles.css" type=text/css rel=stylesheet>
<SCRIPT src="//xcdn.php.cn/js/ads/jQuery带阴影的撕页广告代码/js/jquery-latest.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</SCRIPT>
<STYLE type=text/css>
IMG {BEHAVIOR: url(iepngfix.htc)}
#pageflip {RIGHT: 0px; FLOAT: right; POSITION: relative; TOP: 0px}
#pageflip IMG {Z-INDEX: 99; RIGHT: 0px; WIDTH: 50px; POSITION: absolute; TOP: 0px; HEIGHT: 52px; ms-interpolation-mode: bicubic}
#pageflip .msg_block {RIGHT: 0px; BACKGROUND: url(//xcdn.php.cn/js/ads/jQuery带阴影的撕页广告代码/images/subscribe.png) no-repeat right top; OVERFLOW: hidden; WIDTH: 50px; POSITION: absolute; TOP: 0px; HEIGHT: 50px}
</STYLE>
</head>
<body id=home>
<div id=pageflip><A href="跳转域名" target="_blank"><IMG alt="chinaz" src="//xcdn.php.cn/js/ads/jQuery带阴影的撕页广告代码/images/page_flip.png"></A>
<div class=msg_block></div></div>
<center>
<div style="width:550px;margin:20px auto;">
<p>使用方法：</p>
<p>打开index.html</p>
<p>1#pageflip img , .msg_block广告展开后图片大小请修改后面的数值。</p>
<p>2#pageflip img 广告展开前图片大小，请修改后面的数值。</p>
<p>3 .msg_block 广告展示后图片的大小，请修改后面对应的数值。</p>
<p><p>这种效果常被应用在网页广告中，不影响网页内容，而且用户关注度高，网站上很多叫做撕页广告或者翻页广告，也可以叫书角广告。</p>
</div>
</center>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
页:
[1]