网页右上角广告效果-百分百源码网

网页右上角广告效果

发布时间：01/15 来源：浏览：关键词：

<!doctype html public "-//w3c//dtd html 4.01 transitional//en"

"http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>网页右上角广告效果</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script src="images/jquery-latest.js" type=text/网页特效></script>

<script type=text/javascript>
$(document).ready(function(){

//page flip on hover

$("#pageflip").hover(function() {
  $("#pageflip img , .msg_block").stop()
   .animate({//赋予展开广告浮动层的大小

    width: '307px',
    height: '311px'
   }, 500);
  } , function() {
  $("#pageflip img").stop()
   .animate({//赋予原始状态浮动层的大小
    width: '80px',
    height: '82px'
   }, 220);
  $(".msg_block").stop()
   .animate({//赋予广告层放大后收缩回来的层的大小
    width: '80px',
    height: '75px'
   }, 200);
});

});
</script>

<style type=text/css教程>

img {
behavior: url(iepngfix.htc)
}
body {
margin: 0px;
padding: 0px;
}
#pageflip {
right: 0px;
float: right;
position: relative;
top: 0px;
border:0px;
background-color: #ff9900;
}
#pageflip img {
z-index: 99; right: 0px; -ms-interpolation-mode: bicubic; width: 80px; position: absolute; top: 0px; height: 82px; border:0px;
}
#pageflip .msg_block {
right: 0px;
overflow: hidden;
width: 80px;
position: absolute;
top: 0px;
height: 78px;
background-image: url(images/ad.gif);
background-repeat: no-repeat;
background-position: right top;
}

#page_all {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>

<meta content="mshtml 6.00.5730.13" name=generator></head>
<body id=home>
<div id=pageflip><a href="http://www."><img alt=""
src="images/page_flip.png"></a>
<div class=msg_block></div></div>
<div id="page_all"><img src="images/page_all.png" border="0"></div>

</body></html>