1. 程式人生 > >在圖片上停留時逐漸增強或減弱的透明效果

在圖片上停留時逐漸增強或減弱的透明效果

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在圖片上停留時逐漸增強或減弱的透明效果</title>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
  <img src="snipaste_20170824_145806.png" alt="" />
</body>
<script>
 
  $(document).ready(function(){
      $("img").fadeTo("slow", 0.6); 
      $("img").hover(function(){
          $(this).fadeTo("slow", 1.0);
      },function(){
          $(this).fadeTo("slow", 0.6);
      });
  });
</script>
</html>

在這裡插入圖片描述