鼠标移动到图片透明度改变

weixin_30954607

于 2016-08-22 11:43:00 发布

阅读量373

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MissZhao/p/5795019.html

鼠标移动到图片透明度改变：

使用css方法：

img{
    opacity: 1;
}
img:hover{
    opacity: 0.5;
}

用CSS就能实现了！如果想有个缓冲的过程可以使用CSS3的transition。当然如果想兼容低版本的浏览器，还是得用js。

!doctype html>
<html>
    <head>
        <meta http-equiv="content-type " content="text/html"></meta>
    </head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(function () {
          $("img").fadeTo("slow", 0.5);         
          $("img").hover(function(){
            $(this).fadeTo("slow", 1.0); // 设置透明度为100%
          },function(){
             $(this).fadeTo("slow", 0.5); // 设置不透明度mouseout回到50%
          });       
      });
 
    </script>
   <body> 
     <img src="image/p1.jpg"/>
   </body>    
</html>