jQuery网页底部固定横幅图片广告代码

作者 : 源头网 2021-02-8 共33人阅读

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="https://www.58588885.com/" target="_blank">https://www.58588885.com/</a></p>
</div>
</body>
</html>

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"58588885.com",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
源头网 » jQuery网页底部固定横幅图片广告代码