源碼如下：
|
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 () { //針對(duì)ie6，模擬position:fixed效果 if ($.browser.msie && parseInt($.browser.version) == 6) { scrollAd("floatAd"); }})</script> |
我們還可以改下代碼，實(shí)現(xiàn)“單邊展示飄浮廣告，多個(gè)廣告輪播展示”的效果，更改后的源代碼：
|
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();})/*隔時(shí)切換飄浮廣告*/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 () { //針對(duì)ie6，模擬position:fixed效果 if ($.browser.msie && parseInt($.browser.version) == 6) { scrollAd("floatAd"); } //執(zhí)行定時(shí)切換圖片廣告 changePic("floatAd",2);//每隔2秒切換一次廣告圖片展示，間隔時(shí)間可控})</script> |
