现在的位置: 首页 > 综合 > 正文

jQuery实现图片变亮或变暗

2018年06月08日 ⁄ 综合 ⁄ 共 641字 ⁄ 字号 评论关闭

 

                                        
一个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、效果图(说明 当鼠标移动到图片上,图片就会变亮;鼠标离开后,就会变暗)


 

 

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

 

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

 

抱歉!评论已关闭.