网页右下角有广告图片,通过点击进行切换
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>