网页右下角有广告图片,通过点击进行切换

1、在页面中添加两个div:

<div class="right_bottom01"><a href="#"></a></div>
<div class="right_bottom02"><a href="#"></a></div>

2、在样式中进行设置:(图片路径要注意)

<style type="text/css">

.right_bottom01 { width:95px; height:170px; display:block; position:fixed; right:10px; bottom:100px; background:url(../images/01.png) no-repeat;_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;}
.right_bottom02 { width:140px; height:238px; display:none; position:fixed; right:1px; bottom:100px; background:url(../images/02.png) no-repeat;_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;}

</style>

3、通过js代码进行切换

<script type="text/javascript">

$(function()

{

     $(".right_bottom01").bind("click",function(){wxSwitch(1);});
     $(".right_bottom02").bind("click",function(){wxSwitch(2);});

}

//切换方法

function wxSwitch(f)
    {
        if(f==1)
        {
               $(".right_bottom01").hide(); 
               $(".right_bottom02").show();
        }
        else
        {
               $(".right_bottom01").show(); 
               $(".right_bottom02").hide();
        }
    }

</script>

 

 

 

posted on 2013-04-28 10:46  专注2018  阅读(548)  评论(0编辑  收藏  举报