Jq-图片渐隐

主要知识点：animate的运用，hover的两个处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>豪情</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <style>
            *{margin:0;padding:0;font-size:12px;}
            body{background:#000;}
            img{cursor:pointer;}
        </style>
        <script>
        $(function(){
            $('img').each(function(){
                $(this).css('opacity', '0.6');
            }).hover(function(){
                $(this).animate({opacity:1});
            }, function(){
                $(this).animate({opacity:0.6});
            });
        });
        </script>
    </head>
    <body>
        <img src="http://www.google.com/intl/en_com/images/srpr/logo1w.png" alt="" /><br />
        <img src="http://www.google.com/chrome/intl/zh-CN/images/dlpage_alt.jpg" alt="" /><br />
        <img src="http://hiphotos.baidu.com/baidu/pic/item/d27d51afd32062c0fbed508d.jpg" alt="" />
    </body>
</html>

posted @ 2010-05-27 10:11 豪情阅读(785) 评论(0) 编辑收藏举报

刷新页面返回顶部

Jq-图片渐隐

公告