服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 仿百度联盟对联广告实现代码

仿百度联盟对联广告实现代码

2021-02-28 15:24JavaScript教程网 JavaScript

仿百度联盟对联广告源代码展示,主要使用现代浏览器都支持的position:fixed属性,并专门针对ie6做了最大限度的兼容性处理

源码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _position:absolute; background:url(//img.jbzj.com/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
.flAd{left:0;}
.frAd{right:0;}
</style>
<div class="floatAd flAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第1张图"></a>
<span class="closeAd"></span>
</div>
<div class="floatAd frAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第2张图"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(this).parent(".floatAd").hide();
})
/*for ie6*/
function scrollAd(obj) {
    var obj = "." + obj;
    var adTop = $(".floatAd").offset().top;
    //alert(adTop);
    $(window).scroll(function () {
        $(".floatAd").css({
            top : $(window).scrollTop() + adTop
        })
    })
}
$(function () {
    //针对ie6,模拟position:fixed效果
    if ($.browser.msie && parseInt($.browser.version) == 6) {
        scrollAd("floatAd");
    }
})
</script>

我们还可以改下代码,实现“单边展示飘浮广告,多个广告轮播展示”的效果,更改后的源代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px;right:0; _position:absolute; background:url(//img.jbzj.com/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
</style>
<div class="floatAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第3张图"></a>
<a href="#" target="_blank" style="display:none;"><img src="#" width="120" height="270" alt="第4张图"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(".floatAd").hide();
})
/*隔时切换飘浮广告*/
function changePic(obj,times){
    var num=0,
        obj =$("." + obj+" >a"),
        times=times*1000,
        len=obj.length;
    //alert(len);
    setInterval(function(){
        num++;
        num=num>len-1?0:num;//console.log(num);
        $(obj).eq(num).show().siblings("a").hide();
        },times)
    }
/*for ie6*/
function scrollAd(obj) {
    var obj = "." + obj;
    var adTop = $(".floatAd").offset().top;
    //alert(adTop);
    $(window).scroll(function () {
        $(".floatAd").css({
            top : $(window).scrollTop() + adTop
        })
    })
}
$(function () {
    //针对ie6,模拟position:fixed效果
    if ($.browser.msie && parseInt($.browser.version) == 6) {
        scrollAd("floatAd");
    }
    //执行定时切换图片广告
    changePic("floatAd",2);//每隔2秒切换一次广告图片展示,间隔时间可控
})
</script>

延伸 · 阅读

精彩推荐