jQuery网页底部固定横幅图片广告代码
jQuery网页底部固定横幅图片广告代码
<!doctype html>
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>jQuery网页底部固定横幅图片广告代码</title>
<meta name="viewport" id="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.5, maximum-scale=2.0, minimum-scale=0.5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style>
.mask {
position: fixed;
bottom: 0;
left:100%;
width: 100%;
height: 128px;
background: url("images/4772e66619c0f19b5b4d21b132b4a717.jpg") no-repeat scroll center;
z-index: 1001;
}
.closeee{
background: url("images/closesanjiao.png") no-repeat center center;
}
.mask .gotoCenter {
display: block;
width: 1000px;
height: 140px;
margin: 0 auto;
}
.mask .closeee {
position: absolute;
top: 0;
left: 20px;
margin-left: 0px;
width: 40px;
height: 100%;
cursor: pointer;
}
.clickarea{
position: absolute;
top: 0;
left: 200px;
margin-left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
}
.thumbnail {
position: fixed;
right: 0px;
bottom: 0px;
width: 184px;
height: 124px;
cursor: pointer;
/*display: none;*/
}
@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<!-- 活动角标 -->
<div class="mask">
<span class="closeee"></span>
<a href="#"><span class="clickarea"></span></a>
<div class="thumbnail">
<img src="images/d94901eca2cdb9e32862849ccf8fe31f.png">
</div>
</div>
<script>
setTimeout(function(){
$('.thumbnail').trigger('click')
},1000)
// 底部广告栏的收起与展开
$('.thumbnail').on("click", function () {
$(this).animate({"right": -146},400,function () {
$(this).hide();
$('.mask').animate({"left": 0}, 600);
});
});
$('.closeee').on("click", function () {
//var thumbWidth = $('.thumbnail').width();
$('.mask').animate({
"left": "100%"
}, 600, function() {
$('.thumbnail').show().animate({"right": 0},400);
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.58588885.com/" target="_blank">http://www.58588885.com/</a></p>
</div>
</body>
</html>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"58588885.com",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
源头网 » jQuery网页底部固定横幅图片广告代码
2. 分享目的仅供大家学习和交流，请不要用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"58588885.com",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
源头网 » jQuery网页底部固定横幅图片广告代码
