使用JQ实现定时弹窗:
1、书写步骤:
第一步:引入jQuery相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作
2、代码实现
<script type="text/javascript">
$(function(){
time = setInterval("showAd()" , 3000);
})
function showAd(){
$("#img1").fadeIn(3000);
//fadeIn是图片出现的效果 fadeIn为淡入淡出效果
clearInterval(time);
time = setInterval("showhideAd()",3000);
}
function showhideAd() {
$("#img1").slideUp(3000);
clearInterval(time);
}
</script>
使用JS实现弹窗效果
1.实现步骤
第一步:在页面的指定位置,隐藏一个广告图片(使用display的none的属性)
第二步:确定事件(onload)并为其绑定一个函数
第三步:书写这个函数让其显示的定时操作
第四步:书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步:清除显示图片的定时操作
第六步:书写隐藏图片的定时操作
第七步:书写定时器中的函数(获取广告图片的位置并设置属性style的display值none)
第八步:清除隐藏图片的定时操作
2.代码实现
//页面的指定位置,隐藏一个图片
<body onload="init()">
<img src="#图片位置" width="100%" style="display: none" id="img2">
</body>
<script type="text/javascript">
function init(){
time = setInterval("showAd()",3000);
}
function showAd() {
var adEle = document.getElementById("#img2");
adEle.style.display:"block";
clearInterval(time);
time = setInterval("hidden()",3000);
}
function hidden() {
var adEle = document.getElementById("#img2");
adEle.style.display:"none";
clearInterval(time);
}
不管是JS还是JQ实现弹窗广告,实现的步骤都差不多。JS是使用引入的方法进行弹窗的实现,而JQ是事先把图片隐藏在所要显示的位置上,通过改变display的属性,来实现弹窗。