單機放大圖片
阿新 • • 發佈：2017-05-07
ref body ron auto ott left order charset sdn
好久沒上來了，有種小陌生的感覺。
今天就傳一個這幾天一直在研究的代碼吧
單擊加號，圖片放大，加號變成減號；單擊減號，圖片變小，減號變加號。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>泡芙小姐</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> </head> <body id="jiajian"> <div class="tupian"> <img src="img/1.jpg" alt /> </div> <div id="suofang"> <a href="#jiajian" id="jian" class="fang">+</a> <a href="#" id="jia" class="suo">-</a> </div> </body> </html>
css
*{
padding: 0;
margin: 0;
border: none;
}
.tupian{
width: 658px;
height: 548px;
border: 3px solid #666;
box-shadow: 0px 0px 10px 0 rgba(0,0,0,.8);
margin: 50px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.suo{
position: fixed;
left: 47%;
bottom: 10%;
text-decoration: none;
color: #fff;
background-color: rgba(0,0,0,.5);
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 50px;
}
.fang{
position: fixed;
left: 47%;
bottom: 10%;
text-decoration: none;
color: #fff;
background-color: rgba(0,0,0,.5);
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 50px;
}
#jiajian:target img{
transition: all .5s;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
#jian{
display: block;
}
#jia{
display: none;
}
#jiajian:target #jian{
display: none;
}
#jiajian:target #jia{
display: block;
}
感覺還是非常萌萌噠的~~
單機放大圖片