间隔时间启动广告

第一种效果

<!– 间隔时间启动广告 –>
<script type=”text/javascript” src=”https://test.xunaonao.com/4681/js/jquery-1.9.1.js”></script>
<div class=”mask”>
<span class=”closeee”></span>
<a href=”#”><span class=”clickarea”></span></a>
<div class=”thumbnail”>
<img src=”https://test.xunaonao.com/4681/img/d94901eca2cdb9e32862849ccf8fe31f.png”>
</div>
</div>
// 1000=1秒 1000*60= 60秒显示一次
<script>
setInterval(function(){
$(‘.thumbnail’).trigger(‘click’)
},1000*60)
// 底部广告栏的收起与展开
$(‘.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>
<style>
.mask {
position: fixed;
bottom: 0;
left:100%;
width: 100%;
height: 128px;
background: url(“https://test.xunaonao.com/4681/img/4772e66619c0f19b5b4d21b132b4a717.jpg”) no-repeat scroll center;
z-index: 1001;
}
.closeee{
background: url(“https://test.xunaonao.com/4681/img/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>

第二种效果

<!– 间隔时间启动广告 –>
<script type=”text/javascript” src=”https://test.xunaonao.com/4681/js/jquery-1.9.1.js”></script>
<div class=”mask”>
<span class=”closeee”></span>
<a href=”#”><span class=”clickarea”></span></a>
<div class=”thumbnail”></div>
</div>
<script>
setInterval(function(){$(‘.thumbnail’).trigger(‘click’)},1000*10)
// 底部广告栏的收起与展开
$(‘.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>
<style>
.mask {
position: fixed;
bottom: 0;
left:100%;
width: 100%;
height: 128px;
background: url(“https://test.xunaonao.com/4681/img/4772e66619c0f19b5b4d21b132b4a717.jpg”) no-repeat scroll center;
z-index: 1001;
}
.closeee{
background: url(“https://test.xunaonao.com/4681/img/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 {
/*display: none;*/
}
@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
</style>

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
徐闹闹 » 间隔时间启动广告

提供最优质的资源集合

立即查看 了解详情