zoukankan      html  css  js  c++  java
  • 网页右下角有广告图片,通过点击进行切换

    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 { 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 { 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>

  • 相关阅读:
    第一个springMVC项目
    spring声明式事务
    spring整合mybatis
    spring中的Aop
    java代理模式(23种设计模式之一)
    java注解与反射
    spring之自动装配bean
    zookeeper端口修改后无法启动客户端
    vue的学习-简单指令(一)
    springsecurity 安全管理
  • 原文地址:https://www.cnblogs.com/jirglt/p/3048799.html
Copyright © 2011-2022 走看看