如何用CSS或Javascript实现:点击一张图片,该图片换为另一张图片?

图片描述
如何用CSS或Javascript实现当拨号盘关闭时,左下角的图标变为向下的按钮,像这样的-图片描述

现在点击后任然是这样。图片描述

感谢!

阅读 19.5k
3 个回答

采用tiscript实现如下:

var updowm_flag=1;
  function updown_down()
    {
      if(updowm_flag)
      {
        $(#up_down).style#background = "url(image/down.png) no-repeat";       
        updowm_flag=0;
      }
      else
      {
        $(#up_down).style#background = "url(image/up.png) no-repeat";
        updowm_flag=1;
       }
   }
$(#up_down).onClick = function()
  {
    updown_down();
  }

纯使用css实现这样的效果,可以借助某些dom上的特定属性

可以看下http://callmenick.com/post/css-toggle-switch-examples 使用checkbox实现的switch效果

<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    .box{
        width:100px;
        height:100px;
        border:1px solid red;
        position: relative;
        overflow: hidden;
    }
    .A,.B{
        position: absolute;
        z-index: 1;
    }
        
    input{
        display: block;
        width: 100px;
        height: 100px;
        opacity:50;
        position: absolute;
        z-index: 10;
        opacity:0;
    }
    .i_2{
        display: none;
    }
    /*点击i_1 让A图片隐藏,显示B图片*/
    .i_1:checked ~.box .A{
        display: none;
    }
    /*点击i_1让i_2按钮出现(看不见)*/
    .i_1:checked +.i_2{
        display: block;
    }
    /*点击.i_2 让A显示*/
    .i_2:checked ~.box .A{
        display: block;
    }

    /*同时让.i_2隐藏,便于后面再次点击i_1*/
    .i_2:checked{
        display: none;
    }
</style>

</head>
<body>

<input type="radio" name='v' class="i_1" />
<input type="radio" name='v' class="i_2" />
<div class="box" id="box">
    <img class="B" src="B.jpg" />
    <img class="A" src="A.jpg" />
    
</div>

</body>
</html>

经过测试 是成功的 利用的是input元素的:checked,纯css实现,不过有点麻烦,用js简单些

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题