jQuery+css带阴影的撕页广告效果

 

jQuery+css带阴影的撕页广告效果,点击可以查看大图
需      要: 0.0 金币
折      扣: 100 (% 折)
 
相关搜索: jQuery+css 撕页广告 
下载次数: 3
支持一下(0)
0.00%
踩一下(0)
0.00%
  • 下载等级:
  • 编  号: 20120321083506
  • 浏览器兼容IE6.0及以前,IE7.0,IE8.0,IE9.0,Firefox9.0及以前,Firefox10.0,Chrome17.0及以前,Chrome18.0,Opera
  • 更新日期: 2012-03-21
  • 大  小: 107.01K
  • 浏览次量: 1833
  • 开发者链接: 官网  演示
  • 相  关: 违规举报
  • 收  藏:( 0 人收藏) 加入收藏
  • 此内容校验人员: admin
分享到:   
fangjie  
 少尉 上传于/2012-03-21 08:35:53
四星会员   
   

<!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=gb2312" />
<title>25175,中国基础软件开发基地,软件开发基地,软件源码素材下载站</title>

<link href="css/styles.css" type=text/css rel=stylesheet>
<SCRIPT src="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(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="http://www.25175.com/web" target="_blank"><IMG alt="25175" src="images/page_flip.png"></A>
<div class=msg_block></div></div>
<center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>收集:<a href="http://www.25175.com/web/" target="_blank">25175</a></p>
<p></p>
<p><p>这种效果常被应用在网页广告中,不影响网页内容,而且用户关注度高,网站上很多叫做撕页广告或者翻页广告,也可以叫书角广告。</p>
<p>使用方法:</p>
<p>打开index.html</p>
<p>1&nbsp; #pageflip img , .msg_block&nbsp; 广告展开后图片大小请修改后面的数值。</p>
<p>2&nbsp; #pageflip img 广告展开前图片大小,请修改后面的数值。</p>
<p>3 .msg_block 广告展示后图片的大小,请修改后面对应的数值。</p>
<p>&nbsp;</p>
<p>&nbsp;</p></p>
<p></p>
</center>
</body>
</html>

 

 购买记录
foreverfriend
新兵
gzpwudi
新兵
yanqiuxiang
新兵
会员评论:  

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

  验证码:
 
反馈请帮助我们提高!意见反馈