jQuery实现图片变亮或变暗

 

                                         一个jQuery特效例子

 

1、建立html或其它;

 

2、页面引用

<script src="http://code.jquery.com/jquery-latest.js"></script>

 

3、页面主体代码

 <body>
    <div id="contaiter">
     <img src="1.jpg" alt="image" />
     <img src="2.jpg" alt="image" />
     <img src="1.jpg" alt="image" />
    </div>
  </body>

 

4、jQ代码

<script type="text/javascript">
  $(function(){
      $('#contaiter img').animate({
         "opacity":.5
      });
      $('#contaiter img').hover(
      function(){$(this).stop().animate({"opacity":1});},
      function(){$(this).stop().animate({"opacity":.5});
      });

  });
 </script>

 

 

5、效果图(说明 当鼠标移动到图片上,图片就会变亮;鼠标离开后,就会变暗)


jQuery实现图片变亮或变暗_第1张图片
 

 

6、附件为完整的例子内容;可以下载直接使用;

 

7、如有疑问,可以互相讨论;

 

你可能感兴趣的:(jquery)