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

 

版权声明：原创作品，未经允许不得转载，否则将追究法律责任。
本站资源有的自互联网收集整理，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
本文链接:源头网https://www.58588885.com/9086.html
许可协议:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权