码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-08-22 12:14:22      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

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

使用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>

 

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

标签:

原文地址:http://www.cnblogs.com/MissZhao/p/5795019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!