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>

  • 相关阅读:
    对流程和规范的思考
    我的一小时面试指南
    安全扫描工具nikto简单使用
    测试的角色
    测试的窘境
    关于重连测试的一点研究
    ETCD高可用特性学习
    Cgroup和Namespace在测试中的使用(下)
    单循环列表的删除前驱结点
    指针常量字符串
  • 原文地址:https://www.cnblogs.com/jirglt/p/3048799.html
Copyright © 2011-2022 走看看